Vue开发面包屑组件

<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>