绑定样式:
1. class样式
写法:class="xxx" xxx可以是字符串、对象、数组。
字符串写法适用于:类名不确定,要动态获取。
对象写法适用于:要绑定多个样式,个数不确定,名字也不确定。
数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用。
2. style样式
:style="{fontSize: xxx}"其中xxx是动态值。
:style="[a,b]"其中a、b是样式对象。
绑定class样式--字符串写法,适用于:样式的类名不确定,需要动态指定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绑定样式</title>
<style>
.form {
width: 200px;
height: 100px;
border: 1px solid #000;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
.blue {
background-color: blue;
}
.textColor {
color: chartreuse;
}
.bordeRadius{
border-radius: 10px;
}
</style>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 绑定class样式--字符串写法,适用于:样式的类名不确定,需要动态指定 -->
<div class="form" :class="backCol">这是一个div</div>
</div>
<script>
Vue.config.productionTip = false
const vm = new Vue({
el:'#app',
data: {
backCol: 'red',
}
})
</script>
</body>
</html>
可以通过修改data中的值 来动态的修改绑定的样式
绑定class样式--对象写法,适用于:要绑定的样式个数确定、名字也确定,但要动态决定用不用
<body>
<div id="app">
<!-- 绑定class样式--对象写法,适用于:要绑定的样式个数确定、名字也确定,但要动态决定用不用 -->
<div class="form" :class="objCla">这是一个div</div>
</div>
<script>
Vue.config.productionTip = false
const vm = new Vue({
el:'#app',
data: {
objCla: {
textColor: true,
bordeRadius: true
}
}
})
</script>
</body>
注意对象中的key值 必须要是style中定义过的 或者style的内置样式
绑定class样式--数组写法,适用于:要绑定的样式个数不确定、名字也不确定
<body>
<div id="app">
<!-- 绑定class样式--数组写法,适用于:要绑定的样式个数不确定、名字也不确定-->
<div class="form" :class="arrCla">这是一个div</div>
</div>
<script>
Vue.config.productionTip = false
const vm = new Vue({
el:'#app',
data: {
arrCla: ['red', 'textColor', 'bordeRadius']
}
})
</script>
</body>
通过操作数组来控制元素的样式
style样式
绑定内联样式有两种写法 对象形 和 数组形(数组类型的用法在真实开发中时使用较少)
对象形
<body>
<div id="app">
<!-- 绑定style样式--对象写法 -->
<div class="form" :style="objCla">这是一个div</div>
</div>
<script>
Vue.config.productionTip = false
const vm = new Vue({
el:'#app',
data: {
objCla: {
fontSize: '40px',
color: 'red'
}
}
})
</script>
</body>
数组形
<body>
<div id="app">
<!-- 绑定style样式--数组写法 -->
<div class="form" :style="[a, b]">这是一个div</div>
</div>
<script>
Vue.config.productionTip = false
const vm = new Vue({
el:'#app',
data: {
a: {
color: 'red'
},
b: {
fontSize: '30px'
}
}
})
</script>
</body>
对象形和数组形,都是将对象内定义的属性绑定到元素中