当前位置：首页 > news >正文

Vue前端开发：数据绑定方法

news 2024/10/28 15:10:39

在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时，则元素显示，否则元素隐藏。