vue.js实现动态更改css样式_v-on可以改变css样式吗-CSDN博客

本文介绍了Vue.js中四种动态设置元素样式的方法：通过`v-bind:class`结合条件判断改变class，使用运算表达式控制样式，直接用data属性绑定class，以及根据布尔值切换class。示例代码展示了如何实现点击切换高亮、全选功能以及动态响应数据变化更新class。

摘要由CSDN通过智能技术生成

方式一：
HTML代码：

<ul class="header-list">
	<li v-cloak v-for="(item,index) in headerList" v-on:click="selectMainTheme(index)">
		<a href="java:;" :class="{'active':idx == index}">{{item.name}}</a>
	</li>
</ul>

Javascript代码：

var app = new Vue({
	el:"#app",
	router,
	data:{
		m:"hello vue.js",
		active:'2',
		idx:'0',   //默认选择首页
		headerList:[
			{name:'首页1'},
			{name:'首页2'},
			{name:'首页3'},
			{name:'首页4'},
			{name:'首页5'},
			{name:'首页6'}
		]
	},
	methods:{
		// 1.选择
		selectMainTheme:function(index){
			console.log("selectMainTheme" + index);
			console.log("idx" + this.idx);
			this.idx = index;
		}
	}	
});

方式二：运算表达式

<i class="iconfont checkAllBtn" 
	:class="checkAll?'icon-checkboxround1':'icon-checkboxround0' " 
	v-model="checkAll" @click="choiceAll">全选</i>

方式三：

HTML代码：

<div :class="classA">Demo2</div>

Javascript代码：

data: {
  classA: 'class-a'  //当classA改变时将更新class
}

渲染后的HTML:

<div class="class-a">Demo2</div>

方式四：

HTML代码：

<div :class="{ 'class-a': isA, 'class-b': isB}">Demo4</div>

Javascript代码：

data: {
  isA: false,  //当isA改变时，将更新class
  isB: true    //当isB改变时，将更新class
}

渲染后的HTML:

<div class="class-b">Demo4</div>