1_3_图片的切换

原创于 2020-03-13 12:18:12 发布 · 177 阅读

0 ·

CC 4.0 BY-SA版权

VueJS快速入门专栏收录该内容

12 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片切换</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!--导包-->
	</head>
	<body>
		<div id="demo">
			<input type="button" @click="pre" value="上一页" v-show="index!=0">
			<img :src="imgArr[index]"/><!--图标没设定格式,丑就丑点吧,重要的是思路-->
			<input type="button" @click="add" value="下一页" v-show="index!=imgArr.length-1">
		</div>
		<script>
			var img = new Vue({
				el:"#demo",
				data:{
					imgArr:["static/img/img_1.PNG","static/img/img_2.PNG","static/img/img_3.PNG"],
					index:0
				},
				methods:{
					pre:function(){
						if(this.index<=0){
							
						}else{
							this.index--;
						}
					},
					add:function(){
						if(this.index>=2){
							
						}else{
							this.index++;
						}
					}
				}
			})
		</script>
	</body>
</html>