<template>
<ul>
<li v-for="(item,index) in datalist" :key="index">
<span>{{item.text}}</span>
<span class="line"></span>
</li>
</ul>
</template>
<script>
export default{
props:{},
data(){
return{
datalist:[
{
id:1,
text:'北京'
},
{
id:2,
text:'南京'
},
{
id:3,
text:'南京'
}
]
}
},
components:{},
methods:{},
mounted(){},
created(){},
watch:{}
}
</script>
<style scoped lang="scss">
ul{
display: flex;
li:not(:last-child){ //css选择器是关键代码
.line{
display: inline-block;
transform: rotate(30deg);
width: 1px;
height: 8px;
background-color: gray;
}
}
}
</style>
Vue开发面包屑组件
最新推荐文章于 2024-05-17 07:57:39 发布