Vue.js 是一套构建用户界面的渐进式框架，旨在通过简单的 API 创建交互式的 Web 应用程序。Vue 提供了诸多特性，其中数据渲染是其中之一。本文将会详细介绍 Vue 中的数据渲染，以及如何使用插值和表达式进行渲染，同时还会提供一些相关的示例代码给大家参考。
插值
插值是 Vue.js 中最常用的数据绑定方式，大多数初学者都会从插值开始了解 Vue 的数据渲染。插值的基本语法是 {{ expression }}，其中 expression 指的是 JavaScript 表达式，可以是任意的合法的表达式，比如文本、变量、函数、运算等等。插值可以用于显示数据、HTML 标签属性等等。
以下是一个使用插值显示数据的示例代码：
-- -------------------- ---- -------
---- ---------
-------- -- ---- ------
------
--------
--- --- - --- -----
--- -------
----- -
----- -----
-
--
---------在这段代码中，我们通过 data 定义了一个名为 name 的变量并赋值为 'Vue'，然后在 HTML 中使用插值 {{ name }} 显示该变量的值。运行代码，我们会看到页面上显示的是“我的名字是 Vue”。
和变量一样，我们也可以在 HTML 属性中使用插值。以下是一个使用插值设置属性的示例代码：
-- -------------------- ---- -------
---- ---------
---- ------------- -----------
------
--------
--- --- - --- -----
--- -------
----- -
------- -------------------------------
-
--
---------在这段代码中，我们在 img 标签上使用了一个 Vue 的特殊属性 v-bind 并绑定了一个插值 :src="imgSrc"，其中 :src 表示要绑定的属性名称是 src，imgSrc 是我们在 data 中定义的一个变量，它的值是一张图片的地址。这样，当页面加载时，该图片就会显示在页面上。
表达式
除了插值外，Vue 还提供了一些表达式的语法，用于处理一些更复杂的数据渲染和逻辑控制。和插值一样，表达式的基本语法也是一个 JavaScript 表达式，但是在表达式中有些特殊的语法是只有在表达式中才能使用的。
过滤器
过滤器是 Vue 中一个非常方便的功能，它可以让我们轻松地格式化数据。过滤器的语法是在表达式后面加上一个管道符 | 和一个过滤器名称，比如 {{ message | capitalize }}，这样就会把 message 的值转换为大写字母。我们也可以使用参数来调用过滤器，比如 {{ message | limit(10) }}，这样就会把 message 的值截取为长度为 10 的字符串。
以下是一个使用过滤器的示例代码：
-- -------------------- ---- -------
---- ---------
----- ------- - ---------- ------
----- ------- - --------- ------
------
--------
--- --- - --- -----
--- -------
----- -
-------- ------- -------
--
-------- -
----------- -------- ------- -
-- -------- ------ --
----- - ----------------
------ ----------------------------- - --------------
--
------ -------- ------- ------- -
-- -------- ------ --
----- - ----------------
-- ------------- -- ------- ------ -----
------ -------------- ------- - -----
-
-
--
---------在这段代码中，我们在 data 中定义了一个名为 message 的变量，并在 HTML 中使用了两个过滤器 capitalize 和 limit。同时，在 Vue 实例中我们也定义了两个过滤器方法 capitalize 和 limit，它们分别用于将字符串转换为大写字母和截取字符串的长度。
计算属性
计算属性是 Vue 中用于处理更复杂的数据渲染和逻辑控制的一种方式。计算属性的语法是在 Vue 实例中定义一个 computed 对象，其中每个键都是一个计算属性的名称，对应的值是一个函数，函数返回的值将会被作为计算属性的值。
以下是一个使用计算属性的示例代码：
-- -------------------- ---- -------
---- ---------
----- -------- ------
----- ------------ ------
------
--------
--- --- - --- -----
--- -------
----- -
---------- -------
--------- -----
--
--------- -
--------- -------- -- -
------ -------------- - - - - -------------
--
------------- -------- -- -
------ ------------------------------------------
-
-
--
---------在这段代码中，我们在 data 中定义了两个变量 firstName 和 lastName，然后设置了两个计算属性 fullName 和 reversedName。通过 fullName，我们将 firstName 和 lastName 拼接起来作为新的属性值返回；通过 reversedName，我们将 fullName 倒序并重新拼接成一个新的字符串作为新的属性值返回。
总结
通过本文的学习，我们掌握了 Vue 中数据渲染的两种主要方法：插值和表达式。插值是最常用的数据绑定方式，可以用于显示数据或 HTML 标签的属性值等等；而表达式则提供了更多的数据渲染和逻辑控制的能力，包括过滤器和计算属性等等。希望本文可以帮助大家更深入地了解 Vue 的数据渲染，并为大家在实际的开发中带来一些指导和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645a1d7d968c7c53b0c3ea18