vue.js - vue改变class

问题描述

问 题

我有十条数据
<li v-for="(item,index) in rows">

    <div class="Reco_name">
       <img :src="[Src+rows[index].picture]">
       <span>{{rows[index].showname}}</span>
       </div>

       <div class="Reco_Price">
          <p class="Price">
      <span>零售价${{rows[index].ydanjia}}元</span>
      // 当我想点击 这个i标签，替换class，可是十条数据的class都替换了，怎么解决
      //只替换当前点击的class
      <i class="iconfont" v-bind:class=classOject v-on:click="Sclass(index)"></i>
      </p>
      <p class="Price_ruling">现价:${{rows[index].danjia}}元</p>
       </div>
     </li>
     
 export default{
data(){
  return {
    rows:{},
classOject:'icon-taoxin',


  }
  },
   methods:{
     Sclass:function(index){

  
    
  }
   }
   }    

解决方案

你的rows为什么不是数组,你把这段代码拿去试试，点击应该能换对应的class

<ul>
        <li v-for="(item, index) in rows">
            <span>{{item.name}}</span>
            <i :class="item.checked?'icon-taoxin':'icon-heart-copy-copy-copy'" @click="!item.checked=item.checked"></i>
        </li>
    </ul>
    <script type="text/javascript">
        export default {
            data () {
                rows: [
                    {name: '张三', checked: true},
                    {name: '李四', checked: true},
                    {name: '王五', checked: true}
                ]
            }
        }
    </script>

这篇关于vue.js - vue改变class的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！