vue开发教程05：数据绑定及绑定属性指令v-bind

扫描下面的二维码，“关注”我的百家号。

学习vue框架时，我们会接触到一些新名词，如：数据绑定、指令、路由等等，这些都是vue框架的核心内容。从本章开始，我们将慢慢接触到它们。今天，我们主要介绍数据绑定和v-bind绑定属性指令。

一：数据绑定。

vue的数据绑定包括很多种：文本绑定、html数据绑定、属性绑定、事件绑定等等。也就是说，后面的指令绑定也是数据绑定。

文本绑定案例：

<template>
<div>
    {{msg}}
</div>
</template>
<script>
export default {
data(){
return{  //后面的属性声明都在这里声明，不再强调
    msg:'vue视频教程'
}
}
}
</script>

这里的文本绑定，先是在data数据里声明了一个msg属性，然后在template模板中直接用大括号  {{msg}}  来实现文本数据绑定。

二：绑定属性指令v-bind

vue的属性绑定指令v-bind可以绑定DOM节点的所有属性，如：class、style、src、title等等。

1：绑定图片属性src

img_urs:"http://wanlimm.com/images/logo.jpg" //data数据里声明这个属性
<img v-bind:src="img_url">

属性绑定指令的v-bind可以省略，如下：

<img  :src="img_url">

其它属性绑定同理，如：title

2：绑定class属性

class属性有点特殊，因为它会用到CSS样式，所以，要单独介绍一下。绑定class属性，可以根据条件的不同让DOM的class选择不同的值。

对象语法：

v-bind:class=”{属性名: 条件判断 }” ，值是一个对象

下面这句的意思是：如果flag=true时，class=”red”; flag=false时，class=”blue”

<h1 v-bind:class="{ 'red':flag,'blue':!flag }">
{{ msg }}
</h1>

return{
‘flag’:true,
}

<style>
.red{ color:red }
.blue{ color:blue }
</style>

3：绑定属性style

style属性的值是一个对象，可以直接写CSS样式代码（需用大括号括起来），也可以是一个对象变量。

<div :style="data">这里直接用一个data变量</div>
<div :style=”{color: col}">这里用一个对象，正常css写法，需大括号括起来</div>

return {
data:{ //这里data是一个css样式对象
color:'red',
background:'#ccc'
},
col:’blue’
}

有关数据绑定及绑定属性指令v-bind就介绍到这里，如果想更加深入，可以进一步去深入学习。谢谢参阅。