您的位置:首页 >> Vue >> 《和小米一起学Vue.js》— 绑定属性

《和小米一起学Vue.js》— 绑定属性

[ 孤狼 | 2022-07-29 00:56:21 | Vue | 1184°C | 0条评论 ]

数据绑定的一个常见需求场景是操纵元素的 CSS class 列表和内联样式。因为 class 和 style 都是 attribute,我们可以和其他 attribute 一样使用 v-bind 把一个动态的字符串赋值给它们。然而通过字符串拼接生成这些值是麻烦且易出错的。因此,Vue 专门为 class 和 style 的 v-bind 用法提供了特殊的功能增强。除了字符串外,表达式的结果还可以是对象或数组。


v-bind

动态地绑定一个或多个属性,或一个组件 prop 到表达式。在绑定 class 或 style 属性时,支持其它类型的值,如数组或对象。使用语法 v-bind:属性="变量名" 

<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="">



class 绑定

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>




style 绑定

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>




转载请注明出处:http://gl.paea.cn/n.php?n=170
 
如您看得高兴,欢迎随意投喂,让我们坚持创作!
赞赏一个鸡腿
还没有人留下遗迹
综合 · 搜索