文章目录[隐藏]
目录
<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>
您可能感兴趣的文章:
本文由 华域联盟 原创撰写：华域联盟 » Vue开发Sort组件代码详解
转载请保留出处和原文链接：https://www.cnhackhy.com/82999.htm
