5 數據綁定第 1 部分（文本，原始 HTML，JavaScript 表達式） · JavaBeginnersTutorial 中文系列教程

# 5 數據綁定第 1 部分（文本，原始 HTML，JavaScript 表達式） > 原文： [https://javabeginnerstutorial.com/vue-js/5-data-binding-p1/](https://javabeginnerstutorial.com/vue-js/5-data-binding-p1/) 今天，我非常激動，因為我們將要討論 Vue.js 中一些最有趣的數據綁定技術。有必要了解，我們提供了多種將 DOM 與基礎 Vue 實例的數據對象綁定的方法。 ## 文本插值還記得我們在[先前文章](https://javabeginnerstutorial.com/js/vue-js/2-template-syntax-reactivity/)之一中討論的胡須/模板語法`{{ }}`嗎？這是數據綁定的基本形式，稱為“**文本插值**”。可以使用偽指令`v-once`執行一次插值，盡管稍后會更新該屬性的初始值。單擊[此處](https://javabeginnerstutorial.com/vue-js/3-vue-directives/)，以獲取有關`v-once`的詳細說明以及代碼示例和屏幕截圖。 ## 原始 HTML 插值默認情況下，Vue 始終將模板語法中的數據視為純文本。在大多數情況下，這正是我們想要的。但是，編碼完全是旅途中意外的轉折。如果有一天我們想傳遞原始 HTML 并相應地在 DOM 中呈現該怎么辦？當然，您不能使用那些雙花括號，因為如果這樣做，您將得到。 ![data binding raw HTML](https://img.kancloud.cn/32/70/327033ed6c22e0d397e657b85bd13c8d_995x516.png) 并不奇怪嗎？整個 HTML 代碼呈現為純文本。這就是模板語法的工作方式，并且這種行為可以防止任何第三方將不需要的代碼注入您的網站（多么可怕？！）。因此，切勿在用戶無法控制的用戶提供的內容上使用此功能。因此，如果您真的相信提供 HTML 代碼的源代碼是安全的，并希望將其呈現給 DOM，請使用另一個指令`v-html`。 ![v-html](https://img.kancloud.cn/37/78/3778c95644bd7c29c65ff654535afdc2_999x491.png) 使用`v-html`指令會將`<span>`標記的內容替換為`vueLink`數據屬性的值，并將其解釋為純 HTML。因此，超鏈接以指定的綠色顯示。 ## 使用 JavaScript 表達式雙花括號以及顯示純文本還可以求值**單個** JavaScript 表達式。請記住，**僅是單個表達式**。不是語句，不是流控件，不是任何用戶定義的全局變量！讓我們來看一些示例 1. 可以始終在模板語法中訪問“`message`”屬性的值。現在，我們可以對其應用任何可用的 JavaScript `String`方法。 ```jsscript {{ message.length }} ``` 2. js 允許訪問模板表達式中的幾個全局對象，即`Math`和`Date`。小心，不允許訪問用戶定義的全局變量。 ```jsscript {{ Math.PI }} {{ new Date() }} ``` 3. 流控制語句（如`if-else`，`for`，`while`，`do-while`等）將不起作用，因此剩下的唯一選擇是使用三元表達式。始終建議將復雜的邏輯放入我們將在以后的文章中詳細討論的方法中。 ```jsscript {{ message === "Hi everyone!" ? "Welcome to the World of Vue" : "Hola" }} ``` 此外，如前所述，在模板語法內只能使用單個表達式。即使是一個簡單的表達式也無法使用，例如“`let level = 1`”。完整的代碼如下， ### `Index.html` ```html <!DOCTYPE html> <html> <head> <title>Hello Vue!</title>  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app">  <h1>{{ message }}</h1> <p>For more info. on Vue, click {{ vueLink }}</p>  <p>With v-html directive:</br> For more info. on Vue, click <span v-html="vueLink"></span> </p>  <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>  <script src="index.js"></script> </body> </html> ``` ### `Index.js` ```jsscript var app = new Vue({ el: "#app", data: { message: "Hi everyone!", vueLink: "<a href='https://vuejs.org/' style='color:green'>here</a>" } }); ``` 輸出如下， ![Using JavaScript expressions](https://img.kancloud.cn/85/e4/85e4f36647b7a4a3e6cffcca57c814fd_1126x511.png) 上面討論的所有代碼都可以在 [GitHub 倉庫](https://github.com/JBTAdmin/vuejs)中找到。在我請假之前，讓我先給您的大腦一個小任務。我們無法在 HTML 屬性中使用此模板/胡子語法。您能想到其他選擇嗎？我相信你可以！祝你今天愉快？