想了解Vue开发Sort组件代码详解的相关内容吗，m0_52364694在本文为您仔细讲解Vue开发Sort组件的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：Vue开发Sort,Vue开发组件，下面大家一起来学习吧。
<template>
<ul class="container">
<li v-for="(item,index) in datalist" :key="index">
{{item.text}}<span></span>
</li>
</ul>
</template>
<script>
export default{
props:{},
data(){
return{
datalist:[
{
id:1,
text:'山东'
},
{
id:2,
text:'北京'
},
{
id:3,
text:'陕西'
},
{
id:4,
text:'重庆'
}
]
}
},
components:{},
methods:{},
mounted(){},
created(){},
watch:{}
}
</script>
<style scoped lang="scss">
.container{
display: flex;
li{
position: relative;
width: 40px;
height: 20px;
font-size: 14px;
font-weight: 300;
text-align: center;
line-height: 20px;
span{
display: inline-block;
position: absolute;
width: 1px;
height: 50%;
right: 0;
top: 50%;
transform: translateY(-50%);
background-color: #EEEEEE;
}
&:last-child{ //注意这里，消除最后一条灰线的方法
span{
width: 0;
}
}
}
}
</style>
