4.Vue属性绑定和数据双向绑定

1.属性绑定

 

范例：希望提示语可变

模板指令：v-band ，当前title这个属性和“title”这个数据项做一个绑定。

注意：

1）当你使用模板执行，模板指令等号后面根的内容是一个js表达式

v-bind:title="title"，模板指令等号后面根的内容就不再是一个字符串，它是一个js表达式，这个title表达的就是data里面的title

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

2）vue的语法之中，v-bind:可以缩写成：

<div :title="title"> hello world</div>

2.双向绑定

2.1 单项绑定

范例：单项绑定

1)你可以看到content的内容，展示什么是由数据决定的。

2)数据决定了页面的显示，但是页面无法决定于数据里的内容

 

 

2.2 双向绑定：v-model

数据决定了页面的显示，页面决定于数据里的内容

继续修改代码

往里面输入内容的时候，input框里的内容是变了，但是数据的内容没有发生改变

 

范例：双向绑定