Vue.js+Node.js全栈开发教程：Vue.js插值

本节介绍Vue.js框架模板语法中插值的内容，并讲解如何通过插
值实现数据绑定的功能。

9.2.1　文本插值
在Vue.js框架中，进行数据绑定最常见的方式就是使用遵循
Mustache语法的“双大括号（?? ??）”形式的文本插值。下面看一个
最简单的、使用文本插值的代码实例。
【 代 码 9-1 】 （ 详 见 源 代 码 vuetemplate 目 录 中 的
vuetemplate.html文件）

【代码说明】
第01～15行代码中，通过<di?>元素定义了一个层（id="id-di?-
tem?l-text"），在该层内部定义了一个表格（<table>）。在该
表格内，通过Vue.js框架的文本插值模板语法（{{ }}）引用了一
组对象（id、name和age）。
第1?～2?行代码中，通过“ne? Vue()”构造函数实例化Vue对象
（?m）。同时，这段代码创建了Vue对象的入口，并将该对象所定
义的内容渲染到页面中对应的DOM元素中。具体说明如下：
■　第18行代码中，通过el属性绑定了第01～15行代码中定
义的DOM元素（id="id-di?-tem?l-text"）。
■　第1?～2?行代码中，通过data属性进行绑定数据操作。
其中，在第20～22行代码中定义了一组?ro?erty属性
（id、name和age）并进行了初始化操作，一一对应于上
面表格（<table>）中通过Vue文本插值模板语法引用的
对象（id、name和age）。
下面通过VS Code开发工具启动FireFox浏览器，运行测试
vuetemplate.html页面，效果如图9.1所示。

 

当绑定的数据对象上的property属性值发生改变，插值标签处的内容
也都会随之进行更新。
9.2.2　原始HTML插值
在Vue.js框架中，使用Mustache语法的“双大括号（?? ??）”形
式的文本插值，会将任何内容转换为文本形式。这样就会带来一个问
题，如果想在页面展示HTML代码定义的内容就无法实现了，因为文本
插值会将HTML标签直接作为文本输出。
因此，Vue.js框架设计了一个v-html指令，用于直接输出原始
HTML代码定义的内容。下面来看一个使用原始HTML文本插值的代码实
例。
【 代 码 9-2 】 （ 详 见 源 代 码 vuetemplate 目 录 中 的
vuetemplate.html文件）

 

【代码说明】
第06行代码中，通过Vue.js框架的文本插值模板语法（{{ }}）引
用了第一个对象（msg），对象（msg）的定义在Vue构造函数中的
第18行代码。
第10行代码中，通过Vue.js框架的?-html指令插值语法引用了第
二个对象（msgHtml），对象（msgHtml）的定义在Vue构造函数中
的第1?行代码。
第15～21行代码中，定义了Vue构造函数。其中，第1?～20行代码
通过data属性进行绑定数据操作。具体说明如下：
■　第18行代码中，定义了第一个?ro?erty属性（msg）并初
始化为一行字符串信息，对应第06行代码中通过Vue文本
插值模板语法引用的对象（msg）。不过请读者注意，该
字符串中包含了一个换行元素（<br>），因此实际上是
一段HTML代码。
■　第1?行代码中，定义了第二个?ro?erty属性（msgHtml）
并初始化为与上面（msg）相同的字符串信息，对应第10
行 代 码 中 通 过 ?-html 指 令 插 值 语 法 引 用 的 对 象
（msgHtml）。通过第18行和第1?行代码页面显示效果的
对比，可以看到文本插值与?-html指令插值的功能差
别。
下面通过VS Code开发工具启动FireFox浏览器，运行测试
vuetemplate.html页面，效果如图9.2所示

 

如图9.2中的标识所示，使用Mustache语法的“双大括号（??
??）”文本插值方式，将HTML换行标签（<br>）识别成普通文本进行
显示。而使用v-html指令插值语法方式，才可以实现HTML代码的换行
效果。
9.2.3　使用JavaScript表达式
在前面的代码实例中，使用Mustache语法的文本插值基本都是绑
定了简单的property属性值。其实，Vue.js框架对于所有的数据绑
定，都是支持一个完整的JavaScript表达式的。不过需要注意，这里
支持的仅仅是JavaScript表达式，而不支持JavaScript语句。下面看
一个使用JavaScript表达式插值的代码实例。
【 代 码 9-3 】 （ 详 见 源 代 码 vuetemplate 目 录 中 的
vuetemplate.html文件）

 

【代码说明】
第10行代码中，通过文本插值模板语法（{{ }}）引用了?ro?erty
属性（id），并改写成为Ja?aScri?t算术运算表达式（id +
1）。同样地，第15行代码也引用了?ro?erty属性（id），并改写
成为Ja?aScri?t算术运算表达式（id ? id）。
第11行代码中，通过文本插值模板语法（{{ }}）引用?ro?erty属
性 （ name ） ， 并 通 过 Ja?aScri?t 的 String 对 象 方 法
toLo?erCase()，将属性（name）的字符串修改为小写格式。同样
地，第15行代码将属性（name）的字符串修改为大写格式，第21
行代码将属性（name）的字符串进行反转操作。
第12行和第1?行代码中，通过文本插值模板语法（{{ }}）引用
?ro?erty 属 性 （ gender ） ， 并 通 过 三 元 表 达 式 ? 断 属 性
（gender）的布尔值，并计算出结果（'male'or 'female'）。
在第20行代码定义的文本插值模板语法（{{ }}）中，通过引用
Ja?aScri?t的Math对象方法计算出了一个随机数（100以内）。
在第22行代码定义的文本插值模板语法（{{ }}）中，通过引用
Ja?aScri?t的Date对象方法获取当前时间的年份。
下面通过VS Code开发工具启动FireFox浏览器，运行测试
vuetemplate.html页面，效果如图9.3所示。

 

如图9.3中的箭头所示，在Mustache语法的文本插值方式中，使用
JavaScript表达式插值语法可以被Vue.js框架正确解析。