vue中如何窗体加载的时候，让第一个li标签字体呈现红色，点击后让点击的li标签字体变为红色

最新推荐文章于 2024-04-23 16:03:38 发布

HerayChen

最新推荐文章于 2024-04-23 16:03:38 发布

阅读量2k

点赞数

分类专栏：笔记文章标签： vue javascript js html css

本文链接：https://blog.csdn.net/qq_45832807/article/details/105307905

版权

笔记专栏收录该内容

145 篇文章 6 订阅

订阅专栏

在这里主要用了vue的v-bind绑定class属性来改变。
在这里插入图片描述
代码：
方法一：

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style type="text/css">
			ul li {
				/* 鼠标移上去，添加小手样式 */
				cursor: pointer;
			}

			/* 元素绑定的class样式 */
			.active {
				color: red;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<ul>
				<!-- <h2 :class="{key1:value1, key2:value2}">{{name}}</h2> -->
				<li v-for="(item,index) in movie" @click="change(index)" :class="{ active:index === i }">{{ item }}</li>
			</ul>
		</div>
		<script src="./node_modules/vue/dist/vue.js"></script>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data() {
					return {
						i: 0,
						movie: ['老友记', '寻梦环游记', '肖申克的救赎', '摩登女王']
					}
				},
				methods: {
					change: function(index){
						console.log(index);
						this.i = index;
					}
				}
			})
		</script>
	</body>

</html>

方法二：
`

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		ul li {
			/* 鼠标移上去，添加小手样式 */
			cursor: pointer;
		}
		/* 元素绑定的class样式 */
		.active {
			color: red;
		}
	</style>
</head>

<body>
	<div id="app">
		<ul>
			<li v-for='(item,index) in movie' @click="liClick(index)" :class='{ active:currentIndex === index }'>{{ item }}</li>      
			
			<!-- 实现原理 -->
			<!-- <li :class='{ active:0 === index }'></li> 
			<li :class='{ active:1 === index }'></li> 
			<li :class='{ active:2 === index }'></li> 
			<li :class='{ active:3 === index }'></li>  -->
		</ul>
	</div>
	<script src="./node_modules/vue/dist/vue.js"></script>
	<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			data() {
				return {
					// 判断变红的数据的索引
					currentIndex: 0, 
					movie: ['寻梦环游记', '肖申克的救赎', '摩登家庭', '老友记']
				}
			},
			methods: {
				// 元素标签点击事件
				liClick(index) {
					this.currentIndex = index; 
				}
			}
		})
	</script>
</body>

HerayChen

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue中如何窗体加载的时候，让第一个li标签字体呈现红色，点击后让点击的li标签字体变为红色

在这里主要用了vue的v-bindbangdingclass属性来改变。代码：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca...
复制链接

扫一扫