三 样式绑定
在日常开发中,我们关于应用界面的处理无外乎两个方面:数据和样式。
HTML页面关于样式的设置,我们总所周知就是使用class
和style
属性来实现动态样式的效果。
(1)class绑定
:class="xxx"
(xxx是vm中定义的变量名称(可变数据),如果使用’xxx’表示的是固定值字符串)
xxx的取值范围如下:
- 表达式是字符串:‘classA’
- 表达式是对象:
{classA:isA,classB:isB}
- 表达式是数组(不常用):
['classA',变量名称]
(2)style绑定
常用写法:style="{ color: activeColor, fontSize: fontSize + 'px' }
,其中activeColor、fontSize 是data属性,如果涉及的样式中含有-
使用驼峰命名规则
(3)代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04_class与style绑定</title>
<style>
.classA {
color: red;
}
.classB {
background: blue;
}
.classC {
font-size: 20px;
}
.classD {
font-family: 隶书;
}
</style>
</head>
<body>
<div id="app">
<h2>1. class绑定: :class='xxx'</h2>
<p :class="'classD'">设置固定的样式</p>
<p class="classA" :class="myClass">xxx是字符串,myClass是data属性中定义变量,有追加效果</p>
<p class="classD" :class="{classA: hasClassA, classB: hasClassB}">xxx是对象</p>
<p :class="['classA', myClass]">xxx是数组</p>
<h2>2. style绑定</h2>
<p :style="{color:activeColor, fontSize:fontSize+'px'}">:style="{ color: activeColor, fontSize: fontSize + 'px' }"</p>
<button @click="update">更新</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
myClass: 'classB',
hasClassA: true,
hasClassB: false,
activeColor: 'deeppink',
fontSize: 20
},
methods: {
update () {
this.myClass = 'classC'
this.hasClassA = !this.hasClassA
this.hasClassB = !this.hasClassB
this.activeColor = 'green'
this.fontSize = 30
}
}
})
</script>
</body>
</html>