一、插值
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>
效果图：