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

最新推荐文章于 2022-07-11 15:20:07 发布

赵小白的编程日记

最新推荐文章于 2022-07-11 15:20:07 发布

阅读量2.1k

点赞数 1

分类专栏： vue 文章标签： vue点击为控件添加样式

vue 专栏收录该内容

4 篇文章

订阅专栏

<!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>

--------------------- 
作者：叶落森 
来源：优快云 
原文：https://blog.youkuaiyun.com/xiasohuai/article/details/80749931