- 关注我的头条号
- 加入我的QQ群
扫描下面的二维码，“关注”我的头条号，我会每天更新免费视频课程。
学习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就介绍到这里，如果想更加深入，可以进一步去深入学习。谢谢参阅。
