Vue.js 模板

在之前的 Vue.js 实例章节中，我们学习了如何在屏幕上以文本内容的形式获取输出。在本章中，我们将学习如何在屏幕上以 HTML 模板的形式获取输出。 Vue.js 使用基于 HTML 的模板语法，方便 Vue.js 开发人员以声明方式将渲染的 DOM 绑定到基础 Vue 实例的数据。所有 Vue.js 模板都是有效的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。

如果您选择简单的插值方法，即使用双花括号来显示 Web 浏览器上的 HTML 内容，它将显示错误的结果。

让我们看一个简单的例子，看看输出，以便很好地理解这个概念。

Index.html 文件

Index.js 文件

让我们使用一个简单的 CSS 文件来使输出更具吸引力。

Index.css 文件

程序执行后，您将看到以下输出

输出

Firstname : Albert
Lastname : Pinto
<div><h1>This is Vue.js Template Example</h1></div>

在上面的示例中，您可以看到 html 内容没有像您想要的那样在浏览器上显示。 html 内容以您在变量 htmlcontent 中指定的方式显示。 这不是你想要的。 我们希望在 浏览器上以适当的 HTML 内容显示它。

要解决这个问题，我们将不得不使用 v-html 指令。 当我们将 v-html 指令分配给 html 元素时，Vue.js 知道它必须将其作为 HTML 内容输出。

现在，在 .html 文件中添加 v-html 指令，并在以下示例中查看差异。

语法

示例 2

Index.html 文件

Index.js 文件

程序执行后，您将看到以下输出

输出

Firstname : Albert
Lastname : Pinto
This is Vue.js Template Example 

在上面的示例中，您可以看到在使用 v-html 指令后，您可以成功地将 HTML 模板添加到 DOM。 现在，让我们看看如何将属性添加到现有的 HTML 元素。

将属性添加到 HTML 元素

假设，我们在 HTML 文件中有一个图像标签，我们想要分配 src，它是 Vue.js 的一部分。 见下面的例子

Index.html 文件

Index.js 文件

程序执行后，您将看到以下输出

输出

在上面的示例中，您可以看到图像已损坏。 因此，我们必须使用 v-bind 指令将任何属性分配给 HMTL 标签。

让我们使用 v-bind 指令将 src 添加到图像。 见下面的例子

Example3

Index.html

Index.js

程序执行后，您将看到以下输出

输出

您看到在将 v-bind 指令添加到 img src 之后，图像已完全加载。