vue 点击动态展示不同的图片

左手牵♪♡右手

于 2021-12-06 14:13:08 发布

阅读量956

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45102212/article/details/121745760

版权

本文介绍了如何在Vue.js应用中使用三目运算符根据状态动态显示不同的图片，并提及了通过处理数组及事件赋值来实现这一功能的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
代码部分:可以用三目运算根据状态判断

 <div class="svt-s mainSty-center">
        <div class="svs hand" v-for="(item,val) in data" :key="val" @click="select(val)">
          <img :src="item.status ? item.icons1 : item.icons" alt="">
          <div class="text">{
  {item.name}}</div>
        </div>
      </div>

数组处理：以及最后事件赋值，或许有最好的办法，目前只想起来这样做

      data:[
        {icons:require('@/assets/images/teshu1.png'),icons1:require('@/assets/images/teshu.png'), status:true,name:''},
        {icons:require('@/assets/images/wanshan1.png'),icons1:require('@/assets/images/wanshan.png'), status:false,name:''},
        {icons:requ