vue.js怎么在v-for中使v-bind:class跟着变量值改变

vue.js怎么在v-for中使v-bind:class跟着变量值改变,我现在只在页面刚渲染时才执行一次,但不会随着变量值变换动态渲染class

  <li v-for="item in items" v-on:click="clickOneItem(item.item_id)" v-bind:class="{active: isItemSelected(item.item_id)}">
    <input type="checkbox">
    <img v-bind:src="item.img_url">

    <div class="fyh-textcon">
        <p>{{ item.title }}</p>
         <p class="">价格:<span>¥ {{ item.price }}</span></p>
    </div>
  </li>
                
                
           <script>
                 ...     
methods: {
            isItemSelected: function (item_id) {
                var self = this;
                if (undefined == self.fetchedItems[item_id]) {
                    return false;
                }
                return self.fetchedItems[item_id].isSeclected;

            }
}
                 ...
          </script>       

回答:

v-bind:class="{active: item.isSeclected}"
楼主试试这种方式呢。

回答:

    <div v-for=" item in arr">
        <p :class="item.className"> {{ item.title }} </p>
    </div>
    
    或者:
    
    
    <div v-for=" item in arr">
        <p :class=" 'item-' + $index "> {{ item.title }} </p>
    </div>

    还有也可以使用过滤器filter
    
    

回答:

clipboard.png

http://cn.vuejs.org/guide/ins…

回答:

什么鬼,你的class后面是个变量才是响应式的,你这就是一个方法,你的变量作为参数传进去的,怎么可能重新跑这个方法呢?
写的太复杂了,fetchItem是做什么的,一定要吗,你暴露给html的接口应当尽可能的简单,处理在js都做好,你给html的只要一个item的变量,更改列表的这个值。

回答:

这个和Vue的响应式原理相关,可以看这里:深入响应式原理

在 clickOneItem 这个方法里使用 $set 方法给isSeclected属性赋值就可以了

   // 将这个方法的参数直接修改为 item
    clickOneItem : function(item){
        this.$set(item,'isSelected',true)
    }

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注