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>