v-bind
除了将值插入到模板内容中,我们也需要将一些属性动态绑定。比如动态绑定a元素的href属性或者动态绑定img的src属性,这个时候我们就需要v-bind方法了。
v-bind基础
v-bind用于绑定一个或多个属性值,通过Vue实例中的data绑定元素的src和href,代码如下:
<div id="app">
<!-- 错误的做法这里不可以适应Mustache语法 -->
<!-- <img src="{{imgURL}}" alt=""> -->
<!-- <h2>{{message}}</h2> -->
<img v-bind:src="imgURL" alt="">
<a v-bind:href="aHref">百度一下</a>
<!-- ------------------------->
<!-- 语法糖写法 -->
<img :src="imgURL" alt="">
<a :href="aHref">百度一下</a>
<!-- 结果一样 -->
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
imgURL: "https://img30.360buyimg.com/seckillcms/s144x144_jfs/t1/148676/38/19362/141781/5fe168e0E98f292f0/47ae34cfd2278542.jpg!q70.jpg.webp",
aHref: "http://www.baidu.com"
}
})
v-bind动态绑定class
很多时候我们希望动态的切换class,比如:当数据某个状态时字体为红色,另一个状态时字体为黑色。绑定class有两种方式:对象语法,数组语法。
- 对象语法
对象语法可以有下面的用
用法一:直接通过{}绑定一个类
<h2 :class="{'active':isActive}">Hello World</h2>
用法二:也可以通过判断,传入多个值
<h2 :class="{'active':isActive,'line':isLine}">Hello World</h2>
用法三:和普通的类同时存在,并不冲突(如果isActive
和isLine都为true,那么会有title/active/line三个类)
<h2 class="title" :class="{'active':isActive,'line':isLine}">Hello World</h2>
用法四:如果过于复杂,可以放在一个methods或者computed中(classes是一个计算属性)
<h2 class="title" :class="classes">Hello World</h2>
<div id="app">
<!-- <h2 class="active">{{message}}</h2> -->
<!-- <h2 :class="active">{{message}}</h2> -->
<!-- --------------------------->
<!-- <h2 v-bind:class="{类名1:boolean,类名2:boolean}">{{message}}</h2> -->
<!-- <h2 v-bind:class="{active:true,line:true}">{{message}}</h2> -->
<h2 v-bind:class="getClasses()">{{message}}</h2>
<button v-on:click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
isActive: true,
isLine: false
},
methods: {
btnClick: function () {
this.isActive = !this.isActive
},
getClasses: function () {
return { active: this.isActive, line: this.sLine }
}
}
})
- 数组语法(不常用)
<div id="app">
<h2 class="title" :class="[active,line]">{{message}}</h2>
<h2 class="title" :class="getClasses()">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
active: "aaaa",
line: "bbbbb"
},
methods: {
getClasses: function () {
return [this.active, this.line]
}
}
})
</script>
v-bind动态绑定style
我们可以利用v-bind:style来绑定一些CSS内联样式。
- 对象语法
<div id="app">
<!-- <h2 :style="{key(属性名):value(属性值)}">{{message}}</h2> -->
<!-- 50px要加单引号 不加单引号会把50px当成变量 -->
<!-- <h2 :style="{fontSize:'50px'}">{{message}}</h2> -->
<!-- finalSize当成变量使用 -->
<h2 :style="{fontSize:finalSize+'px',color:finalColor}">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
finalSize: 100,
finalColor: "red"
}
})
- 数组语法
<div id="app">
<h2 :style="[baseStyle,baseStyle1]">{{message}}</h2>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
baseStyle: { color: 'red' },
baseStyle1: { fontSize: '100px' }
}
})
</script>