1.v-text
<div id="app">
<span v-text="msg"></span>
</div>
var app=new Vue({
el: "#app",
data:{
msg: 'Hello Wrold',
}
})
最后不要忘了前面加上脚步引入
<script src="http://webapp.didistatic.com/static/webapp/shield/z/vue/vue/1.0.24/vue.min.js"></script>
v-text指令可以更新元素的文本内容(textContent),即会覆盖元素内原本的文本内容。看下面例子:
<div id="app">
<span v-text="msg">123{{msge}}</span>
</div>
var app=new Vue({
el: "#app",
data:{
msg: 'Hello Wrold',
msgs: "welcome"
}
})
结果还是不变,元素内文本内容被指令内容覆盖了。
2.v-html
<div id="app2">
<div v-html="html"></div>
</div>
var app2=new Vue({
el: '#app2',
data:{
html:'<span class="cont">Hello Wrold</span>'
}
})
v-html指令可以更新元素的文档结构(innerHTML),但是不支持数据绑定。
3.v-model
<div id="app3">
<input type="text" v-model="msg" name="">
<p>{{msg}}</p>
</div>
var app3=new Vue({
el: '#app3',
data:{
msg: '请输入。。。'
}
})
v-model指令用于在表单控件元素上面创建双向数据绑定,即当输入框内容改变时,下面p标签内容也随之改变。
4.v-bind
<div id="app4">
<div v-bind:class="[classA,{classB: b,classC: c}]"></div>
</div>
var app4=new Vue({
el:'#app4',
data:{
classA:'classA',
b:true,
c:false
}
})
v-bind指令用于响应更新HTML特性,建一个或多个属性(attribute),或者一个组件prop动态绑定到表达式。v-bind也可以省略如下:
<img v-bind:src="imgsrc">
<img :src="imgsrc">
在绑定class或style时,支持其他类型的值,如数组或对象。