默认情况下，Vue 始终将模板语法中的数据视为纯文本。 在大多数情况下，这正是我们想要的。 但是，编码完全是旅途中意外的转折。 如果有一天我们想传递原始 HTML 并相应地在 DOM 中呈现该怎么办？ 当然，您不能使用那些双花括号，因为如果这样做，您将得到。
<noscript><imgalt="data binding raw HTML"class="alignnone size-full wp-image-14050"height="516"sizes="(max-width: 995px) 100vw, 995px"src="img/70ef2d5460c92c8046ff872d1c287630.png"srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/10/1_raw-html-as-text.jpg 995w, https://javabeginnerstutorial.com/wp-content/uploads/2018/10/1_raw-html-as-text-300x156.jpg 300w, https://javabeginnerstutorial.com/wp-content/uploads/2018/10/1_raw-html-as-text-768x398.jpg 768w"width="995"/><p>并不奇怪吗？ 整个 HTML 代码呈现为纯文本。 这就是模板语法的工作方式，并且这种行为可以防止任何第三方将不需要的代码注入您的网站（多么可怕？！）。 因此，切勿在用户无法控制的用户提供的内容上使用此功能。 因此，如果您真的相信提供 HTML 代码的源代码是安全的，并希望将其呈现给 DOM，请使用另一个指令<strong> v-html </strong>。</p><p><imgalt="v-html"class="alignnone size-full wp-image-14051"data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/10/2_raw-html-rendered-1.jpg"height="491"src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20999%20491'%3E%3C/svg%3E"width="999"/></p><noscript><imgalt="v-html"class="alignnone size-full wp-image-14051"height="491"src="img/6a0607653cf9dc089d2f8898879809a8.png"width="999"/><p>使用<strong> v-html </strong>指令会将<code><span></code>标记的内容替换为<code>vueLink</code>数据属性的值，并将其解释为纯 HTML。 因此，超链接以指定的绿色显示。</p><h2><strong>使用 JavaScript 表达式</strong></h2><p>双花括号以及显示纯文本还可以评估<strong><em>单个</em></strong> JavaScript 表达式。</p><p>请记住，<strong>仅是单个表达式</strong>。 不是语句，不是流控件，不是任何用户定义的全局变量！ 让我们来看一些例子</p><ol><li>可以始终在模板语法中访问“message”属性的值。 现在，我们可以对其应用任何可用的 JavaScript String 方法。</li></ol><pre><codeclass="language-javascript">{{ message.length }}</code></pre><olstart="2"><li>js 允许访问模板表达式中的几个全局对象，即 Math 和 Date。 小心，不允许访问用户定义的全局变量。</li></ol><pre><codeclass="language-javascript">{{ Math.PI }} {{ new Date() }}</code></pre><olstart="3"><li>流控制语句（如 if-else，for，while，do-while 等）将不起作用，因此剩下的唯一选择是使用三元表达式。 始终建议将复杂的逻辑放入我们将在以后的文章中详细讨论的方法中。</li></ol><pre><codeclass="language-javascript">{{ message === "Hi everyone!" ? "Welcome to the World of Vue" : "Hola" }}</code></pre><p><spanclass="ezoic-adpicker-ad"id="ezoic-pub-ad-placeholder-124"></span><spanclass="ezoic-ad box-4 adtester-container adtester-container-124"data-ez-name="javabeginnerstutorial_com-box-4"style="display:block !important;float:none;margin-bottom:2px !important;margin-left:0px !important;margin-right:0px !important;margin-top:2px !important;min-height:110px;min-width:728px;text-align:center !important;"><spanclass="ezoic-ad"ezah="90"ezaw="728"id="div-gpt-ad-javabeginnerstutorial_com-box-4-0"style="position:relative;z-index:0;display:inline-block;min-height:90px;min-width:728px;"></span></span>此外，如前所述，在模板语法内只能使用单个表达式。 即使是一个简单的表达式也无法使用，例如“让等级= 1”。</p><p>完整的代码如下，</p><h3>Index.html</h3><pre><codeclass="language-html"><!DOCTYPE html><html><head><title>Hello Vue!</title><!-- including Vue with development version CDN --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body><div id="app"><!-- text interpolations --><h1>{{ message }}</h1><p>For more info. on Vue, click {{ vueLink }}</p><!-- raw HTML interpolation --><p>With v-html directive:</br> For more info. on Vue, click <span v-html="vueLink"></span></p><!-- JavaScript expressions --><p> Length of the 'message' String: {{ message.length }} </br> Value of PI: {{ Math.PI }} </br> Today's date is: {{ new Date() }} </br> Result of ternary expression is: {{ message === "Hi everyone!" ? "Welcome to the World of Vue" : "Hola" }} </br></p></div><!-- including index.js file --><script src="index.js"></script></body></html></code></pre><h3>Index.js</h3><pre><codeclass="language-javascript">var app = new Vue({ el: "#app", data: { message: "Hi everyone!", vueLink: "<a href='https://vuejs.org/' style='color:green'>here</a>" } });</code></pre><p>输出如下，</p><p><imgalt="Using JavaScript expressions"class="alignnone size-full wp-image-14052"data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/10/3_JS-expr.jpg"height="511"src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201126%20511'%3E%3C/svg%3E"width="1126"/></p><noscript><imgalt="Using JavaScript expressions"class="alignnone size-full wp-image-14052"height="511"src="img/b723c5b8f6cfc7058907ba787ddf98ee.png"width="1126"/><p>上面讨论的所有代码都可以在<ahref="https://github.com/JBTAdmin/vuejs"> GitHub 仓库</a>中找到。</p><p>在我请假之前，让我先给您的大脑一个小任务。 我们无法在 HTML 属性中使用此模板/胡子语法。 您能想到其他选择吗？ 我相信你可以！</p><p>祝你今天愉快 ？</p><divclass="sticky-nav"style="font-size: 15px;"><divclass="sticky-nav-image"></div><divclass="sticky-nav-holder"><divclass="sticky-nav_item"><h6class="heading-sm">下一篇文章</h6></div><h5class="sticky-nav_heading "style="font-size: 15px;"><ahref="https://javabeginnerstutorial.com/vue-js/6-data-binding-p2/"title="6\. Data binding Part 2 (Attributes)"> 6.数据绑定第 2 部分（属性）</a></h5></div></div></body></html></noscript>
\ No newline at end of file
并不奇怪吗？ 整个 HTML 代码呈现为纯文本。 这就是模板语法的工作方式，并且这种行为可以防止任何第三方将不需要的代码注入您的网站（多么可怕？！）。 因此，切勿在用户无法控制的用户提供的内容上使用此功能。 因此，如果您真的相信提供 HTML 代码的源代码是安全的，并希望将其呈现给 DOM，请使用另一个指令`v-html`。
