Vue學習（三）：數據綁定語法
阿新 • • 發佈：2018-12-11
ESS com tle pre ext 分享圖片 info sage 文本
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>數據綁定語法</title> </head> <body> <!--1.插值--> <!--文本插值--> <h3 id="example1">{{ message }}</h3> <!--文本單次插值（當數據改變時，插值處的內容不會繼續更新）--> <h3 id="example2" v-once>{{ message }}</h3> <!--原始的 HTML 插值--> <div id="example3" v-html="htmlValue"></div> <!--2.JavaScript 表達式--> <div id="example4"> <p>{{ number + 1 }}</p> <p>{{ ok ? ‘YES‘ : ‘NO‘ }}</p> <p>{{ message.split(‘‘).reverse().join(‘‘) }}</p> </div> <script type="text/javascript" src="vue.min.js"></script> <script> // example 1 let vm1 = new Vue({ el: ‘#example1‘, data: { message: ‘Hello Vue.‘ } }); // example 2 let vm2 = new Vue({ el:‘#example2‘, data: { message: ‘Hello Vue.‘ } }); // 改變`message`, 發現不能改變 vm2.message = ‘Hello Vue World.‘; // example 3 let vm3 = new Vue({ el: ‘#example3‘, data: { htmlValue: ‘<h2>Hello Vue.</h2>‘ } }); // example 4 let vm4 = new Vue({ el: ‘#example4‘, data: { number: 5, ok: true, message: ‘Hello Vue.‘ } }); </script> </body> </html>
結果：
Vue學習（三）：數據綁定語法