欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

uni-app中view实现多选,点击选中并改变样式,再点击取消

程序员文章站 2022-07-14 22:57:25
...

效果图:

uni-app中view实现多选,点击选中并改变样式,再点击取消

template:  

<view :class="{'cur': rSelect.indexOf(index)!=-1}" v-for="(value,index) in infoArr" :key="index" @tap="tapInfo(index)">{{value.name}}</view>

  js:

export default {
    data(){
        return{
            rSelect:[]
        }
    },
    methods:{
        tapInfo(e) {
	        if (this.rSelect.indexOf(e) == -1) {
	    	    console.log(e)//打印下标
		        this.rSelect.push(e);//选中添加到数组里
	        } else {
		        this.rSelect.splice(this.rSelect.indexOf(e), 1); //取消
		    }
        }
    }
}

css(选中样式):

.cur {
		color: white;
		border: 1px solid #e5e5e5;
		background-color: #ff5d00;
}

 

相关标签: uni-app