vuejs属性绑定和双向绑定

属性绑定

html

<div v-bind:title="title">hello world</div>

js

new Vue({
　　el:'#root',
　　data:{
　　　　title:'this is hello world'
　　}
})

所以我们注意到一个点，只要是vuejs的指令，后面的就不是字符串，而是js表达式了，既然是表达式，那么title里面的内容就可以进行更改，比如"'deil'+title"

v-bind:title可以简写成:title

 

双向数据绑定

单向绑定意思是数据可以改变页面的内容，但页面无法改变数据

vuejs里面可以用 v-model实现双向绑定，就是input里面的值变了，数据里面的值也变了

html

<div id='root'>
　　<input v-model='content'/>
　　<div>{{content}}</div>
</div>

js

new Vue({
　　el:'#root',
　　data:{
　　　　content:'this is content'
　　}
})