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'
  }
})
原文地址:https://www.cnblogs.com/wzndkj/p/9539977.html