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(
·
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动态修改标签的样式属性
更多推荐
已为社区贡献3条内容
所有评论(0)