vue.js - Vue 点击切换颜色

问题描述

问 题

第一次点击span 字体变颜色，再次点击恢复原来颜色，做成选中的效果

代码：

<li><span>健康医疗</span><span>生活服务</span><span>旅游</span><span>金融</span></li>
<li><span>信息安全</span><span>广告营销</span><span>数据服务</span><span>智能硬化</span></li>
<li><span>文化娱乐</span><span>网络招聘</span><span>分类信息</span><span>电子商务</span></li>
<li><span>移动互联网</span><span>企业服务</span><span>社交网络</span></li>

我是小白>_< 大神们，这个怎么弄？？？

。。。有木有选择span标签进行判断的方法>_<。。。

解决方案

修改后：
<ul v-for="(item,index) in lidata">

 <li><span :class="{active:index==isActive}"  @click="changeClass(index)"> {{item.name}}
</span></li>  

</ul>

data(){

    return{
    isActive:-1，
    lidata:[
    {index:0,name:'健康医疗'},
    {index:1,name:'生活服务'},
    {index:2,name:'旅游'},
    {index:3,name:'金融'},
    {index:4,name:'信息安全'},
    {index:5,name:'广告营销'},
    {index:6,name:'数据服务'},
    {index:7,name:'智能硬化'},
    {index:8,name:'文化娱乐'},
    {index:9,name:'网络招聘'},
    {index:10,name:'分类信息'},
    {index:11,name:'电子商务'},
    {index:12,name:'移动互联网'},
    {index:13,name:'企业服务'},
    {index:14,name:'社交网络'}
    ]
    }
   }
   
changeClass(index){
 this.isActive=index;
},


实现多选：

 <ul v-for="(item,index) in lidata">
<li><span :class="{active:item.checked}"  @click="changeClass(item)"> {{item.name}}</span>
 </li>  

</ul>

changeClass(item){

 if(typeof item.checked=='undefined'){
    this.$set(item,"checked",true)
 }else{
   item.checked=!item.checked
 }
},


限制三次：
  changeClass(item){
    let a=document.getElementsByClassName('active'); 
   if(typeof item.checked=='undefined'){
     if(a.length<=3){
      this.$set(item,"checked",true); 
   }else{
    alert(2222222222)
   }  
  }else{
   item.checked=!item.checked; 
  }
},

这篇关于vue.js - Vue 点击切换颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！