绑定class样式
写法
<div :class="xxx"></div>
xxx可以是字符串、对象、数组。
字符串写法
适用场景
绑定一个样式, 类名不确定,要动态获取。
举例
需求:
点击随机切换主题
按钮, 将 div 样式随机改为 redTheme 、 greenTheme 、 blueTheme 中的其中一个。
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>绑定class样式-字符串写法</title>
<style>
.basic{
width: 400px;
height: 100px;
border: 1px solid black;
}
.redTheme{
background-color: red;
}
.greenTheme{
background-color: green;
}
.blueTheme{
background-color: blue;
}
</style>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<button @click="changeTheme">随机切换主题</button> <br/><br/>
<div class="basic" :class="theme" @click="changeTheme">你好, {{name}}</div>
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el:'#root',
data:{
name:'leco',
theme:'redTheme'
},
methods: {
changeTheme(){
const arr = ['redTheme','greenTheme','blueTheme']
const index = Math.floor(Math.random() * 3)
this.theme = arr[index]
}
},
})
</script>
</html>
效果(默认):
点击随机切换主题
按钮后theme属性随机变为redTheme、greenTheme、blueTheme中的一个, 从而导致div绑定的class样式发生改变:
对象写法
适用场景
要绑定多个样式,个数确定,名字也确定,但不确定用不用。
举例
需求:
有三个复选框: 大字体、红色背景、圆角框, 根据勾选与否决定是否应用对应样式。
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>绑定class样式-对象写法</title>
<style>
.basic{
width: 400px;
height: 100px;
border: 1px solid black;
}
.bigFont{
font-size: 30px;
}
.redBg{
background-color: red;
}
.borderRadius{
border-radius: 20px;
}
</style>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<div class="basic" :class="classObj">你好, {{name}}</div> <br/>
<input type="checkbox" @change="applyBigFont"/>
<label>大字体</label><br/>
<input type="checkbox" @change="applyRedBg"/>
<label>红色背景</label><br/>
<input type="checkbox" @change="applyBorderRadius"/>
<label>圆角框</label><br/>
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el:'#root',
data:{
name:'leco',
classObj: {
bigFont: false,
redBg: false,
borderRadius: false
}
},
methods: {
applyBigFont(e) {
this.classObj.bigFont = e.target.checked
},
applyRedBg(e) {
this.classObj.redBg = e.target.checked
},
applyBorderRadius(e) {
this.classObj.borderRadius = e.target.checked
},
},
})
</script>
</html>
效果(默认):
当三个复选框都勾选后的效果:
数组写法
适用场景
要绑定多个样式,个数不确定,名字也不确定。
举例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>绑定class样式-数组写法</title>
<style>
.basic{
width: 400px;
height: 100px;
border: 1px solid black;
}
.bigFont{
font-size: 30px;
}
.redBg{
background-color: red;
}
.borderRadius{
border-radius: 20px;
}
</style>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<div class="basic" :class="classArr">你好, {{name}}</div>
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el:'#root',
data:{
name:'leco',
classArr: ['bigFont', 'redBg', 'borderRadius']
}
})
</script>
</html>
tips: 可以看到, 这里稍加改动也能达到对象写法举例中的效果, 但是对数组的操作相对会比较麻烦。
使用数组写法的好处是, 你可能有个div一开始初始绑定几个class, 后续需要动态的添加若干个class, 这种场景你只需要后续向classArr中添加新的元素即可。
但是由于数组本身的特性, 后续只是添加元素会比较好用, 如果还需要经常删除元素, 则不建议使用数组写法, 使用对象写法是个更好的选择。
绑定style样式
写法
<div :style="xxx"></div>
xxx可以是 样式对象 或者数组, 当xxx是数组时, 数组的每个元素需要是一个样式对象。
样式对象举例:
<script type="text/javascript">
const vm = new Vue({
el:'#root',
data:{
xxx:{
fontSize: '20px',
color: 'red',
backgroundColor: 'blue'
}
}
})
</script>
其实就是原先的那些样式属性, 但是要改成小写字母开头的驼峰写法。