动态设置样式有两种方式:1.动态改变class 2.动态设置style
1.动态改变class
<!-- 动态绑定class -->
<!-- 1.基本绑定class -->
<button :class="test1">测试1</button>
<!-- 2.动态绑定class -->
<button :class="isActive ? 'active' : ''">测试2</button>
<!-- 3.对象语法绑定class -->
<button :class="{ active : isActive }">测试3</button>
<!-- 4.对象语法的多个键值对 -->
<button :class="{ active : isActive, test4_class : true }">测试4</button>
<!-- 5.动态绑定class和普通class同时使用 -->
<button :class="{ active : isActive, test4_class : true }" class="test5_class">测试5</button>
<!-- 6.方法的方式返回动态的class -->
<button :class="getTestClass()">测试6</button>
<!-- 7.数组写法 -->
<button :class="['test7_class', {'big_font':isBig}]">测试7</button>
2.动态设置style
<!-- 动态绑定style -->
<!-- 1.对象形式 -->
<h2 :style="{color : isActive ? 'yellow' : 'pink'}">Hello World 1</h2>
<!-- 2.动态绑定属性,属性是一个对象 -->
<h2 :style="objStyle">Hello World 2</h2>
<!-- 3.数组形式 -->
<h2 :style="[objStyle,{ backgroundColor : 'gray' }]">Hello World 3</h2>
全部代码:
<!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>
.test1_class {
color: red;
}
.active {
color: green;
}
.test4_class {
font-size: 20px;
}
.test5_class {
font-style: italic;
}
.test7_class {
color: blue;
}
.big_font {
font-size: 25px;
}
</style>
</head>
<body>
<div id="app">
<!-- 动态绑定class -->
<!-- 1.基本绑定class -->
<button :class="test1">测试1</button>
<!-- 2.动态绑定class -->
<button :class="isActive ? 'active' : ''">测试2</button>
<!-- 3.对象语法绑定class -->
<button :class="{ active : isActive }">测试3</button>
<!-- 4.对象语法的多个键值对 -->
<button :class="{ active : isActive, test4_class : true }">测试4</button>
<!-- 5.动态绑定class和普通class同时使用 -->
<button :class="{ active : isActive, test4_class : true }" class="test5_class">测试5</button>
<!-- 6.方法的方式返回动态的class -->
<button :class="getTestClass()">测试6</button>
<!-- 7.数组写法 -->
<button :class="['test7_class', {'big_font':isBig}]">测试7</button>
<!-- 动态绑定style -->
<!-- 1.对象形式 -->
<h2 :style="{color : isActive ? 'yellow' : 'pink'}">Hello World 1</h2>
<!-- 2.动态绑定属性,属性是一个对象 -->
<h2 :style="objStyle">Hello World 2</h2>
<!-- 3.数组形式 -->
<h2 :style="[objStyle, { backgroundColor : 'gray' }]">Hello World 3</h2>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
data: function () {
return {
test1: 'test1_class',
isActive: true,
isBig: true,
objStyle: {
color: 'purple',
fontSize: 30 + 'px'
}
}
},
methods: {
getTestClass() {
return {
active: this.isActive
}
}
}
})
app.mount("#app")
</script>
</body>
</html>
效果展示: