vue列表添加多个选中状态

最新推荐文章于 2023-07-24 10:27:52 发布

念了半位旧人

最新推荐文章于 2023-07-24 10:27:52 发布

阅读量854

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/Armof/article/details/121007414

版权

在这里插入代码片
1.在vue template中添加选择种状态
<template>
在点击的状态中添加选中状态
<li class="Course-left-er-ul-lin" 
    v-for="(item,index) in Courselist" 
       :key="index"
   >
    <span 
         :class="{'Course-left-er-ul-link':selected.indexOf(item)!=-1}"
         @click="Courseuy(index,item)">{{item.title}}
   	</span>
 </li>
</template>
2.在vue  data里面添加数组
data（）{
	return{
		 selected:[],
           huio:[],
	}
}
3.在methods添加点击事件
Courseuy:function(index,item){
            // // 添加状态
            // if(this.selected.indexOf(item) !==-1){
            //     this.selected.splice(this.selected.indexOf(item),1)//取消
            // }else{
            //     this.selected.push(item)//添加数组中
            // }
            // // 遍历数组
            // this.huio=this.selected.map(yui=>{
            //     return (yui.code)
            // })
            // // console.log(this.huio)
            // // 数组求和
            // this.rtyy=this.huio.reduce((x,y)=>{
            //     return(x+y)
            // },0)//0为初始值，无初始值报错

        },