Vue.js学习笔记：属性绑定 v-bind
v-bind 主要用于属性绑定，Vue官方提供了一个简写方式 :bind，例如：css
<!-- 完整语法 --> <a v-bind:href="url"></a>
<!-- 缩写 --> <a :href="url"></a>
绑定HTML Classhtml
1、对象语法：数组
咱们能够给v-bind:class 一个对象，以动态地切换class。注意：v-bind:class指令能够与普通的class特性共存学习
HTML代码：url
<ul class="box" v-bind:class="{‘textColor‘:isColor, ‘textSize‘:isSize}">
<li>学习Vue</li>
<li>学习Node</li>
<li>学习React</li>
</ul>
CSS代码：spa
.box{
border:1px dashed #f0f;
}
.textColor{
color:#f00;
background-color:#eef;
}
.textSize{
font-size:30px;
font-weight:bold;
}
JS代码：.net
var vm= new Vue({
el:‘.box‘,
data:{
isColor:true,
isSize:true
}
})
从图中能够看到，HTML最终渲染为 <ul class="box textColor textSize"></ul>code
当 isColor 和 isSize 变化时，class列表将相应的更新，例如，将isSize改为false，class列表将变为 <ul class="box textColor"></ul>htm
也能够直接绑定数据里的一个对象：对象
HTML代码：
<ul class="box" :class="classObject"> <li>学习Vue</li> <li>学习Node</li> <li>学习React</li> </ul>
JS代码：
var vm= new Vue({
el:‘.box‘,
data:{
classObject:{
‘textColor‘:true,
‘textSize‘:false //不渲染，注意看下面的截图
}
}
})
2、数组语法
咱们能够把一个数组传给v-bind:class，以应用一个class列表
HTML代码：
<ul class="box" :class="[classA, classB]"> <li>学习Vue</li> <li>学习Node</li> <li>学习React</li> </ul>
JS代码：
var vm= new Vue({
el:‘.box‘,
data:{
classA:‘textColor‘,
classB:‘textSize‘
}
})
若是想根据条件切换列表中的class，能够用三目运算
HTML代码：
<ul class="box" :class="[isA?classA:‘‘, classB]"> <li>学习Vue</li> <li>学习Node</li> <li>学习React</li> </ul>
JS代码：
var vm= new Vue({
el:‘.box‘,
data:{
classA:‘textColor‘,
classB:‘textSize‘,
isA:false
}
})
在这个例子中，首先判断isA的boolean值，若是为true，则渲染classA；若是为false，则不渲染。classB没有作三目运算，因此是始终显示的，看看页面截图
对于多个class，能够这么写：
<div v-bind:class="[classA, { classB: isB, classC: isC }]">
绑定内联样式
1、对象语法
v-bind:style 的对象语法十分直观--很是像CSS，其实它是一个Javascript对象，CSS属性名必须用驼峰命名法 （官方文档写的是既能够用驼峰也能够用 短横分隔命名法），可是用短横分隔是会报错的
HTML代码：（这里演示CSS属性名用短横分隔报错）
<div id="box" :style="{color:activeColor, font-size:size}">红嘴绿鹦哥</div>
JS代码：
var vm= new Vue({
el:‘#box‘,
data:{
activeColor:‘#f00‘,
size:‘30px‘,
shadow:‘5px 2px 6px #000‘
}
})
页面报错：
当咱们按照驼峰命名法的规则去写的时候，一切正常：
HTML代码：
<div id="box" :style="{color:activeColor, fontSize:size, textShadow:shadow}">红嘴绿鹦哥</div>
查看页面效果：
也能够直接绑定到一个样式对象，这样更好，让模板更清晰：
HTML代码：
<div id="box" :style="styleObject">红嘴绿鹦哥</div>
JS代码：
var vm= new Vue({
el:‘#box‘,
data:{
styleObject:{
color:‘red‘,
fontSize:‘30px‘
}
}
})
2、数组语法
可将多个样式对象应用到一个元素上
HTML代码：
<div class="box" :style="[styleObjectA, styleObjectB]">好好学习，每天向上</div>
JS代码：
var vm2= new Vue({
el:‘.box‘,
data:{
styleObjectA:{
fontSize:‘36px‘,
color:‘blue‘
},
styleObjectB:{
textDecoration:‘underline‘
}
}
})
页面效果：
添加图片SRC地址
给img标签的src属性赋值时，按照传统的方法{{url}}：
HTML代码：
<img class="box" src="{{url}}" >
JS代码：
var vm= new Vue({
el:‘.box‘,
data:{
url:‘https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png‘
}
})
此时，图片能够正常显示，可是会报一个404错误，查看控制台能够看到，Vue更加推荐咱们使用 v-bind:src
使用 v-bind:src 再来试试看
HTML代码：
<img class="box" :src="url" >
查看页面截图：
本文转载自 “dapengtalk” 博客