axure 图片切换图片的交互_用v-on:click v-bind v-show 实现图片切换
本文共 1166 字，大约阅读时间需要 3 分钟。
文件目录结构：
icons文件夹内容：
images文件夹内容：
vueDemo.html文件内容：
<html>
<head> <title>Smile's Vue20200518</title> <!-- 导入vue.js文件 --> <script src="./vue.js"></script></head><body> <div id="app"> <div style="height: 600px; width: 600px;"> <!-- :src 为 v-bind:src 的简写--> <img :src="imgs[index]" height="600px" width="600px" style="margin-top: 0px;" /> <!-- @click 为 v-on:click 的简写 --> <a href="javascript:void(0)" @click="prev" v-show="index > 0"> <img src="./icons/左.png" height="60px" width="60px" /> </a> <!-- @click 为 v-on:click 的简写 --> <a href="javascript:void(0)" @click="next" v-show="index < imgs.length-1"> <img src="./icons/右.png" height="60px" width="60px" /> </a> </div> </div> <script> var app = new Vue({ // DOM 挂载点 el: '#app', data: { imgs: [ "./images/101离思.jpeg", "./images/102沁园春雪.jpg", "./images/103江雪.jpg", "./images/104洗儿.jpg", "./images/105赴戍登程口占示家人.jpg", "./images/106使至塞上.jpg", "./images/107赠萧瑀.jpg", "./images/108山居秋暝.jpg", "./images/109茅屋为秋风所破歌.jpg", "./images/110沁园春长沙.jpg" ], index: 0 }, methods: { prev: function() { this.index--; }, next: function() { this.index++; } } }) </script></body></html>效果为：
转载地址：http://deeav.baihongyu.com/
你可能感兴趣的文章
mysql-5.7 innodb 的并行任务调度详解
查看>>
shell脚本
查看>>
Upload Image to .NET Core 2.1 API
查看>>
Js时间处理
查看>>
Java项目xml相关配置
查看>>
三维变换概述
查看>>
第三次作业
查看>>
vue route 跳转
查看>>
【雷电】源代码分析（二）-- 进入游戏攻击
查看>>
Entityframework：“System.Data.Entity.Internal.AppConfig”的类型初始值设定项引发异常。...
查看>>
Linux中防火墙centos
查看>>
mysql新建用户,用户授权,删除用户,修改密码
查看>>
FancyCoverFlow
查看>>
JS博客
查看>>
如何设置映射网络驱动器的具体步骤和方法
查看>>
ASP.NET WebApi 基于OAuth2.0实现Token签名认证
查看>>
283. Move Zeroes把零放在最后面
查看>>
Visual Studio Code 打开.py代码报Linter pylint is not installed解决办法
查看>>
Python 数据类型
查看>>
S5PV210根文件系统的制作（一）
查看>>