<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>
推薦閱讀: