动态绑定 style
写法：
:style="{fontSize: xxx}"其中xxx是动态值。
:style="[a,b]"其中a、b是样式对象。
有三种动态绑定的写法
完整代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style></style>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<div style="width: 100px;height: 100px; border: solid 1px pink"> 固定 </div>
<!-- 1. 动态绑定style,值为一个对象 -->
<div :style="{
width:w,height:h,border:borderHave}"> 动态绑定style 1 </div>
<!-- 2. 动态绑定style,值为一个变量 -->
<div :style="boxStyle"> 动态绑定style 2 </div>
<!-- 3. 数组语法可放多个对象 -->
<div :style="[boxStyle,base]"> 动态绑定style 3 </div>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
w: "100px",
h: "100px",
borderHave: "3px solid pink",
boxStyle: {
width: "100px",
height: "100px",
border: "1px solid blue"
},
base: {
color: "#fff",
backgroundColor: "#f00"
}
}
})
</script>
</body>
</html>
效果图例
用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态绑定内联样式示例</title>
<style>
.text-input {
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
width: 200px;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" class="text-input" v-model="inputText" :style="{
backgroundColor: inputBackgroundColor, fontSize: inputFontSize + 'px' }">
</div>
<script>
let app = new Vue({
el: "#app",
data: {
inputText: '',
inputBackgroundColor: '',
inputFontSize: 16
},
watch: {
inputText(newVal) {
// 根据输入文本的长度设置背景颜色和字体大小
if (newVal.length < 5) {
this.inputBackgroundColor = 'lightgreen';
this.inputFontSize = 16;
} else if (newVal.length >= 5 && newVal.length < 10) {
this.inputBackgroundColor = 'lightblue';
this.inputFontSize = 18;
} else {
this.inputBackgroundColor = 'lightpink';
this.inputFontSize = 20;
}
}
}
})
</script>
</body>
</html>
我们使用Vue框架来创建一个Vue实例，并将其绑定到id为"app"的元素上。在数据中，我们定义了inputText、inputBackgroundColor和inputFontSize这三个变量，分别控制输入文本、背景颜色和字体大小。
在输入框上使用了:style指令来动态绑定内联样式。通过绑定的对象来设置样式的属性。在watch选项中监听inputText的变化，根据输入文本的长度来动态改变背景颜色和字体大小。
