uniapp-简单banner实现

uniapp-简单banner实现

效果：点击某一状态，会显示其下划线，表示选中状态。
代码如下：

<template>
   <view class="p-tb-10 f-r jc-a" >
			<text :class="{'b-b':item.code==1}" v-for="(item,key) in status" :key='key' @click="chooseState($event,key)">{{item.value}}</text>
	</view>
</template>
<script>
	export default{
		data(){
			return{
				status:[
					{cont:0,value:'全部',code:1},
					{cont:1,value:'待发',code:0},
					{cont:2,value:'已发',code:0},
					{cont:3,value:'已交付',code:0}
				]
			}
		},
	methods:{
			// 获取对象及其键值
			chooseState(e,index){
				// foreach循环清空所有的选中状态
				this.status.forEach(function(item,i){
					item.code=0
				})
				// 将当前对象的状态设为已选中
				this.status[index].code=1
				console.log(this.status[index].code)
			},
		}
	}
</script>

<style>
	.b-b{
		border-bottom: 4rpx solid #999999;
	}
</style>

		

里面主要涉及到的知识点：
vue动态修改标签的样式属性