单选状态和多选状态的实现

S小生

于 2022-08-20 16:20:43 发布

阅读量258

点赞数

文章标签：前端微信小程序 vue.js javascript html

本文链接：https://blog.csdn.net/weixin_53124862/article/details/126440785

版权

这篇博客介绍了如何在Vue.js中利用v-for指令和数组操作实现单选和多选功能。通过点击事件绑定，动态改变数据模型实现单选，使用indexOf方法和数组的splice操作实现多选及取消选择。示例代码展示了具体的实现细节，包括元素的显示和状态切换。

摘要由CSDN通过智能技术生成

首先单选要更好实现一点

直接上

//yzlist请求出来的数据在这里就不展示了
<view class="cont_box" v-for="(item,index) in yzlist" :key="index"  @click="checkout(item)">
	<view class="left">
		<image :src="chezkid == item.id ? 'https://22duchao1.oss-cn-beijing.aliyuncs.com/attach/2022/07/be18c202207191405359276.png' : 'https://22duchao1.oss-cn-beijing.aliyuncs.com/attach/2022/07/41506202207191355201456.png'"></image>
	</view>
</view>
//当然也可以根据数组的下标，根据自己的需求来吧
//checkout单机事件并传递参数，把当前点击的id给拿到，根据它的id来进行判断它的状态,来实现单选的功能
checkout(item) {
				console.log(item.id)
                //data里面声明的变量
				this.chezkid = item.id
			},

接下来就是多选状态和取消选中的状态


//首先我们先定义一个空数组 selectList 当前选中的标签，通过使用 indexOf来判断当前是否有符合条件的
<view class="cont_lanle">
	<view :class="selectList.indexOf(sa.id) != -1 ? 'lable_biao_avtive'  :  'lable_biao'"
		v-for="(sa,i) in tagList" :key="i" @click="clicklable(sa.id,sa.name)">{{sa.name}} 
    </view>
</view>

//这里根据需求来传递需要的参数
clicklable(id, name) {
				if (this.selectList.indexOf(id,name) == -1) {
					this.selectList.push(id); //选中标签的并添加到数组里下标
					this.labname.push(name)   //选中标签的名字
					// console.log(this.selectList.length)
                    // console.log(this.labname.length)
				} else {
					this.selectList.splice(this.selectList.indexOf(id), 1) //取消选择从当前的数组里面删除
					this.labname.splice(this.labname.indexOf(name), 1)//同上
			},