目录 <template> <ul class="container"> <li v-for="(item,index) in datalist
<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>
--结束END--
本文标题: Vue开发Sort组件代码详解
本文链接: https://www.lsjlt.com/news/137671.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0