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

代码:


<html>

	<head>
		<title>vuetitle>
		<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>

结果:
记录自己独立编写的第一个vue程序_第1张图片
图片资源:

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

你可能感兴趣的:(vue,hello,vue)