v-bind之动态绑定
2020-07-07 本文已影响0人
瑟闻风倾
1. v-bind 绑定基本属性
- 动态绑定img的src属性
- 动态绑定a的href属性
- 等等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<script type="text/javascript" src="../first/vue1026.js"></script>
</head>
<body>
<div id="app">
<img v-bind:src="imgUrl" alt="">
<img :src="imgUrl" alt="">
<a v-bind:href="aHref">百度一下</a>
<a :href="aHref">百度一下</a>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
imgUrl:"http://img.taopic.com/uploads/allimg/110720/6444-110H01Z61061.jpg",
aHref:"http://www.baidu.com"
}
});
</script>
</html>
语法糖写法（简写）：
v-bind:src简写为:src；v-bind:href简写为:href。
2. 动态绑定class
(1) v-bind 动态绑定class(对象语法)
- 格式：v-bind:class="{ 样式类名1: 布尔值1, 样式类名2: 布尔值2，... }"
- 说明：布尔值为真时，对应的样式起效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<style type="text/css">
.title{
background-color: yellow;
}
.active{
color: red;
}
.border{
border:5px solid seagreen;
}
</style>
<script type="text/javascript" src="../first/vue1026.js"></script>
</head>
<body>
<div id="app">
<h2 class="title" :class="{active:isActive,border:isBorder}">{{message}}</h2>
<h2 class="title" :class="getClasses()">{{message}}</h2>
<button @click="btnClick()">改变样式</button>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
message:"打赢蓝天保卫战",
isActive:false,
isBorder:true
},
methods:{
btnClick:function(){
this.isActive = !this.isActive
this.isBorder = !this.isBorder
},
getClasses:function(){
return {active:this.isActive,border:this.isBorder}
}
}
});
</script>
</html>
语法糖（简写）：
v-bind:class简写为:class；v-on:click简写为@click。
计算属性（computed）：也可以在这里绑定一个返回对象的计算属性``
方法省括号：
(2) v-bind 动态绑定class(数组语法:用的很少)
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
渲染为
<div class="active text-danger"></div>
3. 动态绑定style
(1) v-bind 动态绑定style(对象语法)
- 格式：v-bind:style="{ CSS 属性名1: 属性值1, CSS 属性名2: 属性值2,... }"
- 说明：CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名。
- 应用：常用于组件化开发（组件样式为可动态改变）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<script type="text/javascript" src="../first/vue1026.js"></script>
</head>
<body>
<div id="app">
<h2 :style="{fontSize:finalSize+'px',backgroundColor:finalColor}">{{message}}</h2>
<h2 :style="getStyles()">{{message}}</h2>
<button @click="btnClick()">改变样式</button>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
message:"打赢蓝天保卫战",
finalSize:100,
finalColor:'red'
},
methods:{
btnClick:function(){
this.finalSize = 50
this.finalColor = 'green'
},
getStyles:function(){
return {fontSize:this.finalSize+'px',backgroundColor:this.finalColor}
}
}
});
</script>
</html>
拓展：直接绑定到一个样式对象
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
fontSize: '100px',
backgroundColor: 'red'
}
}
(2) v-bind 动态绑定style(数组语法:用的很少)
<div v-bind:style="[baseStyles, overridingStyles]"></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<script type="text/javascript" src="../first/vue1026.js"></script>
</head>
<body>
<div id="app">
<h2 :style="[styles1, styles2]">{{message}}</h2>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
message:"打赢蓝天保卫战",
styles1:{fontSize:'100px'},
styles2:{backgroundColor:'red',color:'white'}
}
});
</script>
</html>
