- 加入我的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就介绍到这里,如果想更加深入,可以进一步去深入学习。谢谢参阅。