vue.js - vue v-for class 不一样的时候更改里面的文字

问题描述

问 题

  <div class="list_shoucang" @click="shouCClick(index,item)" :class="{list_shoucang_show: item.isCollection}" >
      <img src="./imgaes/shoucaixin.png" alt="">
        收藏
    </div>
    
    
    
    在item.isCollection 为真的时候   收藏> 变成>已收藏。。
    
    我应该怎么绑定好点？

解决方案

<div class="list_shoucang" @click="shouCClick(index,item)" :class="{list_shoucang_show: item.isCollection}" >
  <img src="./imgaes/shoucaixin.png" alt="">
    <span v-if="item.isCollection">已收藏</span>
    <span v-else>收藏</span>
</div>

//或者
<div class="list_shoucang" @click="shouCClick(index,item)" :class="{list_shoucang_show: item.isCollection}" >
  <img src="./imgaes/shoucaixin.png" alt="">
      {{item.isCollection?'已收藏':'收藏'}}
</div>

这篇关于vue.js - vue v-for class 不一样的时候更改里面的文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！