这篇文章主要介绍“如何编写Vue开发Sort组件的代码”，在日常操作中，相信很多人在如何编写Vue开发Sort组件的代码问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何编写Vue开发Sort组件的代码”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
计算
安全
数据库
网络和加速
企业服务
<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组件的代码”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
