有时候我们希望将某些属性进行动态绑定
- 比如a元素的href属性
- 比如img元素src属性
在这些时候,我们可以使用v-bind指令
- 作用:动态绑定属性
- 缩写(语法糖):
:
基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-bind动态绑定属性</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<!-- <img src="{{imgurl}}"> -->
<a v-bind:href="ahref">百度</a><br>
<!-- v-bind的语法糖 ":" -->
<a :href="ahref">语法糖百度</a>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'hello',
imgurl: 'p1.png',
ahref: 'http://www.baidu.com'
},
methods: {}
});
</script>
</body>
</html>
动态绑定class(对象语法,有键有值)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>动态绑定数组</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h2 class="title" :class="['active','line']">{{message}}</h2>
<!-- 加‘’会将内容识别为字符串 -->
<h2 class="title" :class="[active,line]">{{message}}</h2>
<!-- 不加‘’会将内容识别为变量 -->
<h2 class="title" :class="getClasses()">{{message}}</h2>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'hello',
active: 'aaaaa',
line: 'bbbbb'
},
methods: {
getClasses: function() {
return [this.active, this.line]
}
}
});
</script>
</body>
</html>
动态绑定style(多用于组件化开发)
- 我们可以利用
v-bind:style
来绑定一些CSS内联样式 - 在写CSS属性名的时候,比如
font-size
- CSS属性名必须用驼峰命名法
fontSize
- 使用短横杠无法识别
- CSS属性名必须用驼峰命名法
- 绑定class有两种方式
- 对象语法
:style="{color:finalcolor,fontSize:fontsize+'px'}"
style
后面跟的是一个对象类型- 对象的key是css属性名
- 对象的value是具体的值,值可以来自于data中的属性
- 数组语法
<div v-bind:style="[baseStyle,overridingStyles]"><div>
style
后面跟的是一个数组类型- 多个值以
,
分割
- 对象语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>绑定style(对象语法)</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 被vm 实例所控制的区域 -->
<div id="app">
<!-- <h2 :style="{key(属性名):value(属性值)">{{message}}</h2> -->
<!-- 属性值不加''会被识别为变量 -->
<!-- 只能使用驼峰语法 -->
<h2 :style="{fontSize:'50px',color:finalcolor}">{{message}}</h2>
<h2 :style="{fontSize:finalSize}">{{message}}</h2>
<h2 :style="{fontSize:size+'px'}">{{message}}</h2>
<h2 :style="getStyle()">{{message}}</h2>
</div>
<script>
//创建实例对象
const vm = new Vue({
//指定控制的区域
el: '#app',
data: {
message: 'hello',
finalSize: '100px',
size: 100,
finalcolor: 'red'
},
methods: {
getStyle: function() {
return {
fontSize: this.finalSize + 'px',
backgroundColor: this.finalcolor
}
}
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>数组语法</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 被vm 实例所控制的区域 -->
<div id="app">
<h2 :style="[baseStyle,baseStyle2]">{{message}}</h2>
</div>
<script>
//创建实例对象
const vm = new Vue({
//指定控制的区域
el: '#app',
data: {
message: 'hello',
baseStyle: {
backgroundColor: 'red'
},
baseStyle2: {
fontSize: '50px'
}
},
methods: {}
});
</script>
</body>
</html>