vue_案例_点击div的时候,改变背景色

清风不是明月

已于 2022-05-28 07:26:10 修改

阅读量3.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端_vue 文章标签： vue.js javascript 前端

于 2022-05-08 22:24:51 首次发布

本文链接：https://blog.csdn.net/weixin_55806809/article/details/124655887

前端_vue 专栏收录该内容

17 篇文章

订阅专栏

需求一:
有几个div,当点击哪个div的时候给这个div一个背景色,点击相同div的时候,去掉背景色.
案例一：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<div v-for="(item,index) in divData" @click="divClick(index,item)" :style="item.isActive == true ? { backgroundColor: 'red' } : { backgroundColor: 'white' }">
			{{item.name}}div
		</div>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	<script>
		let vm = new Vue({
			el: '#app',
			data: {
				divData: [
					{ id: 1, name: '第一个', isActive: false },
					{ id: 2, name: '第二个', isActive: false },
					{ id: 2, name: '第三个', isActive: false }
				]
			},
			methods: {
				divClick(index, val) {
					/** 当 “点击” 一个“已被点击”的div时 使该div恢复默认色 */
					for (let i in this.divData) {
						if (index == i) {
							this.divData[i].isActive = !this.divData[i].isActive
						} else {
							this.divData[i].isActive = false;
						}
					}
				},
			},
		})
	</script>
</body>
</html>

案例二：（这个方法比较简单）
初始状态下，第一个背景色是红色，以后点击哪个，哪个变为红色

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	.active{
		color:red;
	}
	</style>
</head>
<body>
	<div id="app">
	<ul>
		<li v-for="(item,index) in divData" @click="liClick(index)" :class="{active:currentIndex === index}">
			{{index}}{{item}}
		</li>
	</ul>
	</div>
	<script src="js/vue.js"></script>
	<script>
		let vm = new Vue({
			el: '#app',
			data: {
				divData: ['海王','海贼王','加勒比海盗','海尔兄弟'],
				currentIndex:0,// 记录状态的变量
			},
			methods: {
				liClick(index) {
				 this.currentIndex = index;
				},
			},
		})
	</script>
</body>
</html>