VUE學習十，模板語法，插值
阿新 • • 發佈：2021-07-08
一、文字：資料繫結最常見的形式就是使用“Mustache”語法 (雙大括號) 的文字插值
<div id="app-10"> {{lastname}} </div>
通過使用v-once 指令，你也能執行一次性地插值，當資料改變時，插值處的內容不會更新。如下：
<div id="app-10" v-once> {{lastname}} </div>
// 第一個例項 var myData = { firstname: 'CL', lastname: '張' } // 該物件被加入到一個 Vue 例項中 var vm1 = new Vue({ el:'#app-10', data: myData }) // 一旦設定v-once，這兒的更改不起效果 vm1.lastname = '李';
二、原始HTML：雙大括號會將資料解釋為普通文字，而非 HTML 程式碼。為了輸出真正的 HTML，你需要使用v-html指令：
<!-- 必須使用v-html指令，才能得到想要的效果//--> <div id="app-11"> <p>Using mustaches: {{ rawHtml }}</p> <p>Using v-html directive: <spanv-html="rawHtml"></span></p> </div>
// 第二個例項 var vm2 = new Vue({ el: '#app-11', data: {rawHtml: '<span style="color:red">紅色</span>'} })
三、Attribute：Mustache 語法不能作用在 HTML attribute 上，遇到這種情況應該使用v-bind指令：
<div v-bind:id="dynamicId"></div>
對於布林 attribute (它們只要存在就意味著值為true
v-bind工作起來略有不同，在這個例子中：
<button v-bind:disabled="isButtonDisabled">Button</button>
四、使用 JavaScript 表示式
實際上，對於所有的資料繫結，Vue.js 都提供了完全的 JavaScript 表示式支援。有個限制就是，每個繫結都只能包含單個表示式。
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
五、本篇文章全部程式碼
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>VUE簡單示範</title> <script type="text/javascript" src="../js/vue.min.js" charset="utf-8"></script> </head> <body> <!--例項一、v-once的使用//--> <div id="app-10" v-once> {{lastname}} <!--例項四、-JavaScript指令碼函式 //--> {{firstname.split('').reverse().join('')}} </div> <!-- 例項二，使用v-html指令，才能得到想要的效果//--> <div id="app-11"> <p>Using mustaches: {{ rawHtml }}</p> <p>Using v-html directive: <span v-html="rawHtml"></span></p> <!-- 例項三，v-bind指令，繫結true/false//--> <button v-bind:disabled="isButtonDisabled">Button</button> </div> <script> // 例項一 var myData = { firstname: 'CL', lastname: '張' } var vm1 = new Vue({ el: '#app-10', data: myData }) // 一旦設定v-once，這兒的更改不起效果 vm1.lastname = '李'; // 例項二、例項三 var vm2 = new Vue({ el: '#app-11', data: {rawHtml: '<span style="color:red">紅色</span>', isButtonDisabled: true} }) </script> </body> </html>
本文參考：
https://cn.vuejs.org/v2/guide/syntax.html