Web前端vueDemo—实现图片切换功能（二）
vueDemo系列文章的第二个Demo。
·
系列文章目录
前言
vue的相关配置在系列文章的第一部分中进行了配置。
此处主要使用的标签为：
- v-bind： 对标签的属性进行绑定。主要对标签中的img的src中的图片地址进行了改变。
- v-on： 添加的点击事件。使用到两个方法，pre和post当产生点击事件后会对index的值进行改变。
- v-show： 用于对上一张和下一张按钮的隐藏。隐藏后index的值由于无法继续点击，所以不会再发生变化。
- 补充： v-show和v-if的区别：
vue-show 本质： 给标签添加dispaly的标签。
v-if本质： 是直接将标签从dom树中移除，对性能消耗较大。
如果是频繁切换的元素则使用v-show，否则一般用v-if。
一、项目分布
在配置好vue的环境之后，还需导入需要切换的图片，此处的图片和编号可以是任意的。
二、项目源码
图片切换的源码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Computible" content="ie=edge">
<title>图片切换demo</title>
</head>
<body>
<div id="app">
<input type="button" value="上一张" v-show="index>=1" v-on:click="pre">
<img v-bind:src="images[index]">
<input type="button" value="下一张" v-show="index<images.length-1" v-on:click="post">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.7/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
images:["img/01.jpg","img/02.jpg","img/03.jpg"],
index:0
},
methods: {
//下一张
post:function(){
this.index++;
},
//上一张
pre:function(){
this.index--;
}
}
})
</script>
</body>
</html>
三、运行结果
点击下一张可以进行图片的切换。
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)