【Vue II】数据绑定

anzai249 床主

2023-07-18 12:55:02 2023-07-18 12:55:02 创建 2023-08-22 09:31:27 2023-08-22 09:31:27 更新

166 字 1 分钟

v-bind

<!-- 原版写法 -->
<input type="text" v-bind:value="attribute" />
<!-- 简写 -->
<input type="text" :value="attribute" />

将下方Vue实例返回的数据读取，但是在这里改不会影响到原始变量。

flowchart LR
   A[data] --> B[v-bind] --> C[value]
   C[value] -- "×" --> A[data]

<!-- 原版写法 -->
<input type="text" v-model:value="attribute" />
<!-- 简写，v-model默认修饰value -->
<input type="text" v-model="attribute" />

这下在上面更改的数据会传回到变量，只能应用在表单类元素中。

flowchart LR
   A[data] --> B[v-model] --> C[value]
   C[value] -- 双向绑定 --> A[data]