您的当前位置：首页 axure 图片切换图片的交互_用v-on:click v-bind v-show 实现图片切换

axure 图片切换图片的交互_用v-on:click v-bind v-show 实现图片切换

来源：图艺博知识网

icons文件夹内容：

images文件夹内容：

vueDemo.html文件内容：

<html>
<head>
<title>Smile's Vue20200518</title>

<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<div style="height: 600px; width: 600px;">

<img :src="imgs[index]" height="600px" width="600px" style="margin-top: 0px;" />

<a href="javascript:void(0)" @click="prev" v-show="index > 0">
<img src="./icons/左.png" height="60px" width="60px" />
</a>

<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>

效果为：

https://www.zhihu.com/video/1245870379434307584

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文