<!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>
结果：
