Vue基础4-属性绑定和数据双向绑定

it2026-04-20  4

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框里的内容是变了,但是数据的内容没有发生改变

 

范例:双向绑定

最新回复(0)