数据绑定的一个常见需求场景是操纵元素的 CSS class 列表和内联样式。因为 class 和 style 都是 attribute，我们可以和其他 attribute 一样使用 v-bind 把一个动态的字符串赋值给它们。然而通过字符串拼接生成这些值是麻烦且易出错的。因此，Vue 专门为 class 和 style 的 v-bind 用法提供了特殊的功能增强。除了字符串外，表达式的结果还可以是对象或数组。
动态地绑定一个或多个属性，或一个组件 prop 到表达式。在绑定 class 或 style 属性时，支持其它类型的值，如数组或对象。使用语法 v-bind:属性="变量名"
孤狼 | 
2022-07-29 00:56:21 | 
936°C | 
0条评论 ]<img v-bind:src="imgurl" alt="">
<div v-bind:class="divcss">你好世界</div>v-bind 缩写 ":"
<img :src="imgurl" alt="">
<div :class="divcss">你好世界</div>内联字符串拼接
<img :src="'https://cn.vuejs.org/images/'+imgurl2" alt="">1.对象方式
<div :class="{class类名:布尔值}"></div>
<div :class="{c:cstatus,d:dstatus}">你好世界</div>只有 cstatus 为 true 时，c 才会被动态绑定，多个class之间用 "," 间隔
<div class="class类名" :class="{class类名:布尔值}"></div>
<div class="a" :class="{c:cstatus}">你好世界</div>当普通class属性和动态绑定都存在会自动合并，并且普通属性不会被修改.
2.函数方式
<div :class="getclass()">你好世界</div>通过 methods 里的函数来控制 class 状态。
3.数组方式
<div :class="[变量,'类名']"></div>
<div :class="[divcss,'c']">你好世界</div>通过数组来绑定 class 可以是变量或者固定的类名。
4.对象数组混合方式
<div :class="[变量,{class类名:布尔值}]">你好世界</div>
<div :class="[divcss,{c:cstatus}]">你好世界</div>同时使用数组变量方式和对象控制方式来绑定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>Vue v-bind-class</title>
<script src="./vue.js"></script>
<style>
img{width:100px;}
.a{color:rgb(203, 36, 36);}
.b{color:rgb(47, 33, 200);}
.c{font-size: 24px;}
.d{color:red;}
</style>
</head>
<body>
<div id="msg">
<div>
<a v-bind:href="aurl">
<img v-bind:src="imgurl" alt="">
</a>
<a :href="aurl">
<img :src="imgurl" alt="">
</a>
<br>
<div :class="divcss">你好世界</div>
<button v-on:click="cc">换颜色</button>
<br>
<a :href="aurl">
<img :src="'https://cn.vuejs.org/images/'+imgurl2" alt="">
</a>
<br>
<div :class="{c:cstatus,d:dstatus}">你好世界</div>
<div class="a" :class="{c:cstatus}">你好世界</div>
<div :class="getclass()">你好世界</div>
<div :class="[divcss,'c']">你好世界</div>
<div :class="[divcss,{c:cstatus}]">你好世界</div>
</div>
</div>
<script>
let ndata={
imgurl:'https://cn.vuejs.org/images/logo.svg',
imgurl2:'logo.svg',
aurl:'https://cn.vuejs.org/',
divcss:'a',
cstatus:true,
dstatus:true,
};
const v=new Vue({
el:"#msg",
data:ndata,
methods:{
cc:function(){
this.divcss="b";
},
getclass:function(){
return {c:this.cstatus}
}
}
});
</script>
</body>
</html>
1.对象方式
<div :style="{css属性:变量值}"></div>
<div :style="{'font-size':fs+'px',color:sc,marginTop:mt+'px'}">你好世界</div>css属性支持驼峰命名法(非驼峰不识别)或使用 "-" 连接的属性名，多个属性之间使用 "," 间隔，属性值单位可以用拼接方式连接。
TIP:使用 "-" 连接的属性名不会被识别，所以需要使用引号括起来当做整体字符使用.
2.函数方式
<div :style="gs()">你好世界</div>通过 methods 里的 gs() 函数来控制style状态
3.数组方式
<div :style="[变量属性,变量属性]"></div>
<div :style="[style1,style2]">你好世界</div>通过数组形式的变量属性来绑定style，一个变量属性可以对应一个css样式或多个css样式。多个变量属性之间使用 "," 分隔。
3.对象数组混合方式
<div :style="[变量属性,{css属性:变量值}]"></div>
<div :style="[style1,style2,{'font-size':fs+'px'}]">你好世界</div>同时使用数组变量方式和对象控制方式来绑定style
<!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>Vue v-bind-style</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="msg">
<div :style="{'font-size':fs+'px',color:sc,marginTop:mt+'px'}">你好世界</div>
<div :style="gs()">你好世界</div>
<div :style="[style1,style2]">你好世界</div>
<div :style="[style1,style2,{'font-size':fs+'px'}]">你好世界</div>
</div>
<script>
let ndata={
sc:'red',
fs:'46',
mt:'10',
style1:{color:'red',backgroundColor:'#ddd'},
style2:{border:'1px solid #000'},
};
const v=new Vue({
el:"#msg",
data:ndata,
methods:{
gs:function(){
return {'font-size':this.fs+'px',color:this.sc,marginTop:this.mt+'px'};
}
}
});
</script>
</body>
</html>
<div :[键名]="变量属性"></div>
<div :[key1]="value1" :[key2]="value2">你好世界</div>key为键名，value为变量属性，value支持函数方式
TIP：避免使用大写字符来命名键名，因为浏览器会把键名全部强制转为小写
<!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>Vue v-bind-属性名</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="msg">
<div :[key1]="value1" :[key2]="v3()">你好世界</div>
</div>
<script>
let ndata={
key1:'id',
value1:'titleId',
key2:'style',
value2:'color:red;font-size:20px;'
};
const v=new Vue({
el:"#msg",
data:ndata,
methods:{
v3:function(){
return 'color:#ddd;font-size:30px;';
}
}
});
</script>
</body>
</html>
赞赏一个鸡腿
