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'
　　}
})