一、插值
1.文本
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--引入Vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <title>无标题文档</title> </head> <body> <span id="app1">Message: {{ msg }}</span><br> <span id="app2" v-once>这个将不会改变: {{ msg }}</span> </body> </html> <script type="text/javascript"> // 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值。 // Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。例如下面在app1中设置了msg的属性为“Hello World!”，在下面重新设置了属性值为“123456”，在页面中显示为123456。 var app1 = new Vue({ el: '#app1', data: { msg: 'Hello World!' } }) app1.msg = '123456'; // 通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定。下面的App2也重新设置了msg的值，但是页面中还是显示“你好!”，下面重新设置的属性值无效。 var app2 = new Vue({ el: '#app2', data: { msg: '你好!' } }) app2.msg = '我很好'; </script>
显示结果如下：
2.原始Html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--引入Vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <title>无标题文档</title> </head> <body> <div id="app1"> <p>{{ html }}</p> </div> <div id="app2"> <p v-html="html"></p> </div> </body> </html> <script type="text/javascript"> // 双大括号会将数据解释为普通文本，而非 HTML 代码。 var app1 = new Vue({ el: "#app1", data: { html: "<b style='color:red'>v-html</b>" } }) // 为了输出真正的 HTML，你需要使用 v-html 指令： var app2 = new Vue({ el: "#app2", data: { html: "<b style='color:red'>v-html</b>" } }); </script>
显示结果如下：
3.特性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--引入Vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <style type="text/css"> .box box2{ border:1px dashed #f0f; } .textColor{ color:#f00; background-color:#eef; } .textSize{ font-size:30px; font-weight:bold; } </style> <title>无标题文档</title> </head> <body> <ul class="box" v-bind:class="{'textColor':isColor, 'textSize':isSize}"> <li>我要吃饭</li> <li>我要睡觉</li> <li>我要工作</li> </ul> <ul class="box2" :class="[isA?classA:'', classB]"> <li>我要吃饭</li> <li>我要睡觉</li> <li>我要工作</li> </ul> </body> </html> <script type="text/javascript"> // 如果 isColor、isSize 的值是 null、undefined 或 false，则 textColor、textSize 特性不会被包含在渲染出来的 <button> 元素中。 var vm= new Vue({ el:'.box', data:{ isColor:true, isSize:true } }) var vm2= new Vue({ el:'.box2', data:{ classA:'textColor', classB:'textSize', isA:false } }) </script>
效果图：
