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

代码部分:可以用三目运算根据状态判断

 <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:require('@/assets/images/people1.png'),icons1:require('@/assets/images/people.png'), status:false,name:''},{icons:require('@/assets/images/asi1.png'),icons1:require('@/assets/images/asi.png'), status:false,name:''},],

vue 点击动态展示不同的图片相关推荐

vue v-for遍历动态展示元素数量
vue v-for遍历动态展示元素数量最近研究了下vue,想实现一个功能,通过返回结果类型(列表)动态展示多个元素(可以是:文本框.数字框.选项等).具体的实现如下: 一.实例 1.html pro ...
vue点击把某个区域变成图片数据
前言: 使用html2canvas,可以实现把某个区域变成图片的base64数据官网入口:点我目录: 实现步骤: 1.引入 npm引入: js引入: 2.在需要使用的vue组件中引入: 3.将制定 ...
vue点击按钮怎么跳转图片_Vue中点击按钮切换图片;
页面效果比较差,但是有图总比没图强点这是最开始的页面,我们看到,图中只有一个"右箭头",点击右箭头; 左箭头也有了,然后我们继续点击右箭头; 右箭头没有了,只剩下了左箭头, 以上 ...
vue点击按钮怎么跳转图片_vue页面跳转
一.在template中的常见写法: 点击跳转二.在js中设置跳转(在方法中跳转界面并传参,两种方式:params 与 query): 有时候我们需要的是点击按钮跳出弹窗,选择判断后进行跳转,我们常 ...
vue点击按钮怎么跳转图片_vue下的h5页面实现点击图片跳转小程序
第一步:配置签名和申明openTagList that.$api.getShareParam(params).then(data => { wx.config({ debug: false, a ...
vue点击按钮怎么跳转图片_vue-router组件里面点击一个按钮跳转到一个新的组件该怎么实现...
展开全部直接修改地址栏中的路由地址即可: {{msg}} var testLogin = Vue.component("login",{ template:` 这是我的登录页面 ...
Vue点击动态添加Class
1.先在data里增加一个变量,用来储存当前点击的元素 data() {return {activeClass: -1,// 0为默认选择第一个,-1为不选择list: [{title: '全网搜索( ...
vue 如何实现点击动态更新图形验证码
一.vue 点击动态更新图形验证码在验证码的图片上,绑定点击事件 getCaptcha(),同时使用 ref 指明图形验证码的引用对象,代码如下所示: <section class=" ...
Vue中鼠标悬停更换图片/文字内容，动态展示/修改某些属性
Vue中鼠标悬停更换图片/文字内容,动态展示/修改某些属性鼠标悬停时:@mouseenter 鼠标离开时:@mouseleave 利用以上来绑定相应方法,例如: <div @mouseleav ...

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

vue 点击动态展示不同的图片相关推荐

最新文章

热门文章