从零开始的Vue自学2

最新推荐文章于 2025-04-04 15:06:15 发布

我想吃烤肉肉

最新推荐文章于 2025-04-04 15:06:15 发布

阅读量117

点赞数

分类专栏：从零开始的vue

本文链接：https://blog.youkuaiyun.com/DZY_hungry/article/details/107551056

版权

从零开始的vue 专栏收录该内容

2 篇文章

订阅专栏

要求是写一个原先停留在列表第一个文字变红，然后再次点击别的列表选项，所点击列表选项变红，而其他仍停留在黑色的程序。实现这个知识点需要的是v-bind的动态绑定以及v-for的循环数组。

第一次失败代码：只能实现全黑或者全红

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>改变颜色</title>
		<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
		<style>
			.changeColor{
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="item in movies" :class="{'changeColor':isActive}" @click="getColor()">{{item}}</li>
			</ul>
			
		</div>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					movies:["海王","天气之子","格林","午夜德州","新阴阳魔界","排球女将","良医"],
					isActive : false
				},
				methods:{
					getColor(){
						isActive = !isActive;
					}
				}
			})
		</script>
	</body>
</html>

第二次尝试成功：获取了数组的下标作为判断TRUE or FALSE的依据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>改变颜色</title>
		<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
		<style>
			.changeColor{
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="(item,index) in movies" :class="{'changeColor': num == index}" @click="getColor(index)">{{item}}</li>
			</ul>
			
		</div>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					movies:["海王","天气之子","格林","午夜德州","新阴阳魔界","排球女将","良医"],
					num:0
				},
				methods:{
					getColor(index){
						this.num = index;
					}
				}
			})
		</script>
	</body>
</html>

第三次可以尝试用一个button改变颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>改变颜色</title>
		<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
		<style>
			.changeColor{
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<ul>
				<li :class="{'changeColor': isActive}">{{message}}</li>
			</ul>
			<button @click="getColor(isActive)">点击我变颜色</button>
		</div>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					message:"必须做点什么，要行动起来！",
					isActive: false
				},
				methods:{
					getColor(isActive){
						this.isActive = !isActive;
					}
				}
			})
		</script>
	</body>
</html>