vue点击图片切换

渣男あ

已于 2022-10-20 11:29:55 修改

阅读量1.2k

点赞数 10

文章标签： vue.js 前端 javascript

于 2022-10-15 20:29:11 首次发布

本文链接：https://blog.csdn.net/qq_64011014/article/details/127339900

版权

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<style type="text/css">
		#app {
			width: 620px;
			height: 520px;
			background-color: rgba(69, 220, 231, 0.5);
			margin: 40px auto;
			position: relative;
			box-shadow: 10px 10px 20px 10px rgba(236, 20, 20, 0.5);
		}

		.son {
			width: 600px;
			height: 500px;
			position: absolute;
			left: 50%;
			margin-left: -300px;
			top: 50%;
			margin-top: -250px;
		}

		.jk,
		.sailorsuit,
		.lolita {
			height: 30px;
			width: 120px;
			background-color: rgba(128, 128, 128, 0.5);
			font-size: 24px;
		}

		.son.jk {
			position: absolute;
			right: 50%;
			margin-left: 50px;
			top: 0px;
		}

		.son.sailorsuit {
			position: absolute;
			left: 50%;
			margin-left: -45px;
			top: 0px;
		}

		.son.lolita {
			position: absolute;
			left: 50%;
			margin-left: 25px;
		}

		img {
			width: 100%;
			height: 100%;
		}
	</style>
	<body>
		<div id="app">
			<div class="son">
				<button type="button" class="jk" @click="pref()">水手服 </button>
				<button type="button" class="sailorsuit" @click="next()"> 洛丽塔</button>
				<button type="button" class="lolita" @click="rightupper()">动漫美女</button>
			    
			</div>
			<img id="pic" :src="imgArr[index]">
		</div>
		<script type="text/javascript">
			window.onload = function() {
				var app = new Vue({
					el: "#app",
					data: {
						imgArr: [
							"img/水手服美女.jpg",
							"img/洛丽塔美女.jpg",
							"img/动漫美女.jpg"
						],
						index: 0,

					},
					methods: {
						pref(){
							var msg=document.getElementById("pic");
							msg.src="img/水手服美女.jpg";
						},
						next(){
							var msg=document.getElementById("pic");
							msg.src="img/洛丽塔美女.jpg";
						},
						rightupper(){
							var msg=document.getElementById("pic");
							msg.src="img/动漫美女.jpg";
						}
					}
				})
			}
		</script>
	</body>
</html>

我重新修改一下点击按钮会变色：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<style type="text/css">
		#app {
			width: 640px;
			height: 610px;
			background-color: rgba(69, 220, 231, 0.5);
			margin: 40px auto;
			position: relative;
			box-shadow: 10px 10px 20px 10px rgba(236, 20, 20, 0.5);
		}

		.son {
			width: 630px;
			height: 600px;
			position: absolute;
			left: 50%;
			margin-left: -280px;
			top: 50%;
			margin-top: -305px;
		}

		.jk:focus,
		/* focus  鼠标点击事件. */
		.sailorsuit:focus,
		.lolita:focus,
		.dom:focus,
		.comic:focus {
			height: 32px;
			width: 100px;
			margin-left: 10px;
			/* font-size: 24px; */
			color: aqua;
		}

		.jk,
		.sailorsuit,
		.lolita,
		.dom,
		.comic {
			height: 32px;
			width: 100px;
			margin-left: 10px;
			/* font-size: 24px; */
		}

		img {
			width: 100%;
			height: 100%;
		}

		button {
			border: 1px solid cornflowerblue;
			border-radius: 3px;
			margin-left: 14px;
		}
	</style>
	<body>
		<div id="app">
			<div class="son">
				<button type="button" class="jk" @click="pref()">水手服</button>
				<button type="button" class="sailorsuit" @click="next()">洛丽塔</button>
				<button type="button" class="lolita" @click="rightupper()">动漫美女</button>
				<button type="button" class="dom" @click="si()">萝莉</button>
				<button type="button" class="comic" @click="comi()">动漫</button>
			</div>
			<img id="pic" :src="imgArr[index]">
		</div>
		<script type="text/javascript">
			/* 	//1.获取所有元素元素
			var btns = document.querySelectorAll('button');
			for (var i = 0; i < btns.length; i++) {
			    btns[i].onclick = function(){
			        //2.清空所有默认的样式
			        for (var i = 0; i < btns.length; i++) {
			            btns[i].style.backgroundColor = 'lightpink';
			        }
			        //3.添加颜色
			        this.style.backgroundColor = 'red';
			    }
			} */
			window.onload = function() {
				var app = new Vue({
					el: "#app",
					data: {
						imgArr: [
							"img/水手服美女.jpg",
							"img/洛丽塔美女.jpg",
							"img/动漫美女.jpg",
							"img/萝莉.jpg",
							"img/动漫.jpg"
						],
						index: 0,

					},
					methods: {
						pref() {
							var msg = document.getElementById("pic");
							msg.src = "img/水手服美女.jpg";
						},
						next() {
							var msg = document.getElementById("pic");
							msg.src = "img/洛丽塔美女.jpg";
						},
						rightupper() {
							var msg = document.getElementById("pic");
							msg.src = "img/动漫美女.jpg";
						},
						si() {
							var msg = document.getElementById("pic");
							msg.src = "img/萝莉.jpg";
						},
						comi() {
							var msg = document.getElementById("pic");
							msg.src = "img/动漫.jpg";
						}
					}
				})
			}
		</script>
	</body>
</html>