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标签进行判断的方法>_<。。。

阅读 18.5k
评论
    2 个回答
    • 1.7k

    修改后:
    <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的文档::class:style@click变量

        撰写回答

        登录后参与交流、获取后续更新提醒

        相似问题
        推荐文章