编辑“︁Vue.js模板语法”︁（章节）

== 插值 ==

插值是Vue.js模板语法中最基础的部分，用于将数据绑定到文本内容。

=== 文本插值 ===
最简单的插值形式是使用双大括号`{{ }}`包裹变量名：

<syntaxhighlight lang="html">
<div id="app">
  {{ message }}
</div>
</syntaxhighlight>

对应的JavaScript代码：

<syntaxhighlight lang="javascript">
new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue.js!'
  }
});
</syntaxhighlight>

输出：
<pre>
Hello, Vue.js!
</pre>

=== 原始HTML插值 ===
如果数据包含HTML标签，可以使用`v-html`指令渲染原始HTML：

<syntaxhighlight lang="html">
<div id="app" v-html="rawHtml"></div>
</syntaxhighlight>

对应的JavaScript代码：

<syntaxhighlight lang="javascript">
new Vue({
  el: '#app',
  data: {
    rawHtml: '<span style="color: red;">This is red text.</span>'
  }
});
</syntaxhighlight>

输出：
<span style="color: red;">This is red text.</span>