Vue前端开发:数据绑定方法
在Vue中,数据绑定最常用的方法就是使用Mustache语法,这种语法的标签就是双大括号,因此又被称为双大括号插值语法,在这种语法下,双大括号标签将会被替换为绑定的属性值,并且,当属性值发生变化后,插值处的内容也会同步进行更新。
一、文本插值
所谓的“文本插值”是指使用Mustache语法绑定元素中显示的内容,如下代码:
<div>{{name}}</div>
使用这种方式插值后,如果name值发生了改变,那么,插值处元素的内容也会随之改变,当然,也可以不让它改变,只需要在这个元素上添加一个 v-once指令,如下代码:
<div v-once>{{name}}</div>
向元素添加了 v-once 指令后,元素中插入的值只是name属性的初始值,当该属性值变化后,插值处并不会随之改变,这种使用场景也有,但不是太多。
虽然Mustache语法可以向元素的内容插入数据,但它并不能使用这种方式,向元素的属性插入数据,如果想绑定元素的属性,必须使用v-bind指令,并使用冒号“:”,指定绑定属性的名称,如下代码所示:
<div v-bind:class="red">{{name}}</div>
上述代码也等价于下列代码:
<div :class="red">{{name}}</div>
上述两行代码在浏览器中编译后,最终都为相同的一行代码,如下所示:
<div class="red" data-v-160690f0="">123</div>
需要说明的是:无论是name,还是red,它们都是在data函数中定义好的对象属性名称,编译后,绑定的是这个属性名称对应的值,上述两行相同代码中,name属性名对应的值是 123,red属性名对应的值是“red”,因此,才会显示上述编译后的相同代码。
二、JavaScript表达式和HTML插值
Mustache语法不仅可以向元素内容插入文本字符,同时,还可以在语法中插入简单的JavaScript 表达式,如算术运算、三元运算和简单的函数调用,但只能执行单个表达式,不能执行语句。此外,通过向元素添加 v-html指令,又可以向元素中插入 HTML 格式内容,接下来通过一个示例来详细说明它们的使用方法。
实例3-6 JavaScript表达式和HTML插值
1. 功能描述
新建一个组件,添加一个复选框和两个div元素,当选中复选框时,显示“插入HTML格式”,同时,div 元素中内容以HTML格式显示;当取消选中时,显示“插入文本格式”,同时,div 元素中内容以文本格式显示。
2. 实现代码
在项目components 文件夹的ch3子文件夹中,添加一个名为“BindHtml”的.vue文件,在文件中加入如清单3-6所示代码。
代码清单3-6 BindHtml.vue代码
<template><div><div><input type="checkbox" v-model="blnHtml" />
插入{{ blnHtml ? "HTML" : "文本" }}格式</div><div v-show="!blnHtml">{{ HTML }}</div><div v-show="blnHtml" v-html="HTML"></div></div>
</template>
<script>
export default {data() {return {blnHtml: true,HTML: "<span style='font-weight:700'>你好,小明!</span>",};},
};
</script>
<style scoped>
div {margin: 10px;text-align: left;
}
</style>
3. 页面效果
保存代码后,页面在Chrome浏览器下执行的页面效果如图3-10所示。
##### 4. 源码分析
在本示例的模板中,复选框使用v-model 绑定的属性blnHtml是一个布尔值,既可以用于控制复选框元素的选中状态,又参加了不同内容显示的三元运算,同时,还作为v-show指令绑定的属性值,该指令是一个用于控制元素是否显示和隐藏的指令,当该指令的属性值为true时,则元素显示,否则元素隐藏。
由于 v-html 指令用于控制元素的内容是否以HTML格式显示,且只能作用于元素的属性中,因此,通过再向元素添加一个v-show指令绑定blnHtml的属性值,实现HTML格式与文本格式切换显示的效果。