Vue点击本条添加加class样式，移除其他条class样式

最新推荐文章于 2024-04-25 15:28:41 发布

姜无忧

最新推荐文章于 2024-04-25 15:28:41 发布

阅读量1.7w

点赞数 10

分类专栏： vuejs

本文链接：https://blog.csdn.net/xiasohuai/article/details/80749931

版权

vuejs 专栏收录该内容

140 篇文章 5 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>Vue如何加class</title>
	 <meta charset="utf-8"/>
	 <style type="text/css">
	 	.classred{
	 		color:red;
	 	}
	 </style>
</head>
<body>
<div id="app">	
	<ul class="list">
        <li v-for="(item,index) in liList" v-on:click="addClass(index)" v-bind:class="{ classred:index==current}">{{item.title}}</li>
    </ul>
</div>
<script src="./vue.min.js"></script>
<script type="text/javascript">
	var vm = new Vue({
		el: '#app',
		data: {
		  	name:'叶落森',
		  	current:0,
                        liList:[
                             {title:'叶落森1'},
                             {title:'叶落森2'},
                             {title:'叶落森3'},
                             {title:'叶落森4'}
                        ]
		},
		methods:{			
			addClass:function(index){					
                            this.current=index;
                        }
		},	   
	        mounted: function() {}         	
	})
</script>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

姜无忧

关注关注

10
点赞
踩
12

收藏

觉得还不错? 一键收藏
5
评论
Vue点击本条添加加class样式，移除其他条class样式

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;Vue如何加class&lt;/title&gt; &lt;meta charset="utf-8"/&gt; &lt;style type="text/css"&gt; .classred{ color:red;
复制链接

扫一扫