这篇文章介绍v-bind 绑定html 样式的方法。包括绑定class 和style（内联样式）的方法
● 绑定class有2种语法
（一、对象语法：1.数据属性对象、2.计算属性对象；二、数组语法）
● 绑定style有3种语法
（一、对象语法：1.数据属性对象、2.计算属性对象；二、数组语法；三、多重值）
● 绑定class
一、对象语法：
1. 数据属性对象语法：
<style>
<!--新建一个active 的class-->
.active{color:red}
</style>
<!--v-bind 绑定 active:isActive-->
<div id="div" v-bind:class="{active:isActive}">good good study </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!--引入vue js 外部文件-->
<script>
var classV=new Vue({
el:"#div",
data:{
isActive:true, //此时的isActive 属性值为 true
unActive:false}
})
</script>var classV=new Vue({
el:"#div",
data:{
isActive:true,
unActive:false}
})
<div id="div" v-bind:class="{active:isActive}">good good study </div>
例子说明：
div 元素绑定了 active 这个class，此时 isActive 的数据属性值为 true
格式：v-bind:class="{active:isActive}"
在控制台，输入classV.isActive=false，手动修改isActive 的属性值为 false
此时， div 元素的class 为空。div不显示样式
2. 计算属性语法：
<style>
<!--新建两个class。一个active 和 一个 offical-->
.active{
color:red}
.offical{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:36px;}
</style>
<body>
<!--给div 元素绑定一个computed 对象 activeClass-->
<!--格式：v-bind:class="activeClass"-->
<div id="div" v-bind:class="activeClass">good good study </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!--引入vue js 外部文件-->
<script> 里
var classV=new Vue({
el:"#div",
data:{
isActive:true,
unActive:false},
computed:{
activeClass:function(){
return {
active:this.isActive,
offical:this.isActive}
}
}
})
</script>创建一个计算属性 activeClass
computed:{
activeClass:function(){
return {
active:this.isActive,
offical:this.isActive}
}
}
给div 元素绑定计算属性对象 activeClass
格式为： v-bind:class="activeClass"
二、数组语法：
<style>
<!--新建两个class。一个active 和 一个 offical-->
.active{
color:yellow;
background:#000000}
.offical{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:36px;}
</style>
<body>
<!--给div 元素绑定一个数组对象 activeClass-->
<!--格式：v-bind:class="[activeClass,officeClass]"-->
<div id="div" v-bind:class="[activeClass,officeClass]">good good study </div>
<script>
var classV=new Vue({
el:"#div",
data:{
activeClass:"active",
officeClass:"offical"}
})
</script>data:{
activeClass:"active",
officeClass:"offical"}
给div 元素绑定一个数组
格式：v-bind:class="[activeClass,officeClass]"
class显示：active， offical 两个值，绑定成功
扫描二维码关注公众号，回复：
3382400 查看本文章
● 绑定style
一、对象语法(绑定多个样式和绑定一个样式对象)
<div id="div" v-bind:style="{color:theColor, backgroundColor:bgColor}">HAODE </div>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!--引入vue js 外部文件-->
<script>
var ling=new Vue({
el:"#div",
data:{
theColor:"red",
bgColor:"black"}
})
</script><div id="div" v-bind:style="{color:theColor, backgroundColor:bgColor, fontSize:fntSize+'px'}">
data:{
theColor:"red",
bgColor:"black",
fntSize:36
}
1. 绑定多个 style样式
格式： v-bind:style="{color:theColor, backgroundColor:bgColor, fontSize:fntSize+'px'}" （驼峰书写格式）
2. 绑定一个样式对象
这里绑定了 样式对象 styleObject:
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}注意：
样式的值的格式为多个值时也可以绑定，比如 boxShadow:"0 0 2px 1px gainsboro"
可以直接绑定数据属性对象 v-bind:style='aa'
<div id="app">
<div :style='aa'>Good good study</div>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
aa:{
boxShadow:"0 0 2px 1px gainsboro"
}
}
})
</script>