前端----Vue的学习：简单的点击变色

最新推荐文章于 2022-08-22 23:45:32 发布

WdxOvO17

最新推荐文章于 2022-08-22 23:45:32 发布

阅读量586

点赞数

文章标签： vue.js html javascript

本文链接：https://blog.csdn.net/WdxOvO17/article/details/120832426

版权

在Vue的data中传入数组，然后在li标签中执行v-for循环，让他渲染在li标签里，然后，绑定点击函数，最后动态绑定。直接上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.active {
				color: #f00;
			}
		</style>
	</head>
	<body>
		<div id="divId">
			<ul>
				<!-- 采用对象的思想 -->
				<!-- <li v-for="(item,index) in movies" :key="index" 
				   :class="{active:index===currentIndex}"
					@click="change(index)">{{item}}</li> -->
				<!-- 这里也可以采用三元表达式 -->
				<!-- 采用v-for循环 -->
				<li v-for="(item,index) in movies" :key="index" 
					:class="index===currentIndex?'active':''"    
					@click="change(index)">{{item}}</li>  <!-- 点击的index是否等于当前的index值
					，是就传true，执行class:active，不是则传false，执行为空 -->
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			const vm = new Vue({
				el: "#divId",
				data: {
					currentIndex: 0,
					movies: ["海王", "海贼王", "火影忍者", "复仇者联盟"],
				},
				methods: {
					change(index) {
						 this.currentIndex = index   //注意this指向
					},
				},
				computed: {

				}
			})
		</script>
	</body>
</html>

WdxOvO17

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端----Vue的学习：简单的点击变色

在Vue的data中传入数组，然后在li标签中执行v-for循环，让他渲染在li标签里，然后，绑定点击函数，最后动态绑定。直接上代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .active { color: #f00; } </st
复制链接

扫一扫