记录自己独立编写的第一个vue程序

最新推荐文章于 2022-07-20 18:00:56 发布

明快de玄米61

最新推荐文章于 2022-07-20 18:00:56 发布

阅读量147

点赞数

分类专栏： vue 文章标签： hello vue

本文链接：https://blog.csdn.net/qq_42449963/article/details/108567918

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

代码：

<!DOCTYPE html>
<html>

	<head>
		<title>vue</title>
		<meta charset="utf-8" />
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>

	<body>

		<div id="imgsrc" style="position:absolute;width:590px;height:470px;top:50%;left:50%;margin-left:-295px;margin-top: -235px;border:1px solid black;">
			<div id="left" v-show="leftshow" @click="leftclick" style="position:absolute;left: 0;top:50%;width:50px;height: 50px;margin-top:-25px;color: gray;background-color: rgba(255,255,255,0.3);z-index: 2;line-height: 50px;font-size:20px;text-align: center;cursor: pointer;-moz-user-select: none;font-weight: bold;">
				<</div>
					<img :src="photo" />
					<div id="right" v-show="rightshow" @click="rightclick" style="position:absolute;right: 0;top:50%;width:50px;height: 50px;margin-top:-25px;color: gray;background-color: rgba(255,255,255,0.3);z-index: 2;line-height: 50px;font-size:20px;text-align: center;cursor: pointer;-moz-user-select: none;font-weight: bold;" v-show="rightshow">></div>
			</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el: "#imgsrc",
			data: {
				num: 1,
				photo: "./1.jpg",
				leftshow: false,
				rightshow: true
			},
			methods: {
				leftclick: function() {
					if(this.num == 2) {
						this.leftshow = false;
					}
					this.rightshow = true;
					this.num--;
					this.photo = "./" + this.num + ".jpg";
				},
				rightclick: function() {
					if(this.num == 4) {
						this.rightshow = false;
					}
					this.leftshow = true;
					this.num++;
					this.photo = "./" + this.num + ".jpg";
				}
			}
		})
	</script>

</html>

结果：
在这里插入图片描述
图片资源：

图片太大传不上来，所以上传到资源上了，地址是：https://download.csdn.net/download/qq_42449963/12839702

明快de玄米61

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
记录自己独立编写的第一个vue程序

代码：<!DOCTYPE html><html> <head> <title>vue</title> <meta charset="utf-8" />  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head>
复制链接

扫一扫