双向绑定的两种方法

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情

vue2 中的双向绑定

包含v-model 跟 .sync

v-model

双向绑定就是 数据跟视图的双向绑定

当视图发生改变时,数据也跟随视图一起改变 同理当数据发生改变时,视图也跟着一起发生改变

.sync

.sync它的概念跟v-model一样 ,但它跟 v-model的区别在于, .sync可以多次使用 ,而 v-model只能使用一次

vue3中的双向绑定

在vue3中, 取消了.sync ,把 .sync的功能合并到 v-model上 ,因此 在vue3中 v-model可以多次使用

v-model 补充部分

(1)使用v-model时,要特别注意下 ,在input[checkbox]的多选框状态

变量为非数组时,则绑定的是复选框的checked的属性(true/false) - 常用于单个使用绑定

<!-- 下拉菜单要绑定在select上 -->
 <select v-model="from">
        <option value="北京市">北京</option>
        <option value="南京市">南京</option>
        <option value="天津市">天津</option>
 </select>

变量为数组,则绑定的是复选框的value属性 -常用于收集勾选了哪些值

 <span>爱好: </span>
      <input type="checkbox" v-model="hobby" value="看书">看书
      <input type="checkbox" v-model="hobby" value="散步">散步
      <input type="checkbox" v-model="hobby" value="写代码">写代码

(2) v-model有哪些修饰符 v-model的语法是: v-model.修饰符="vue数据变量" 1.1 .number 作用是 将 parseFloat转为数字类型 通俗一点就是说,只能输入数字,其他的输入不了 1.2 .trim 作用是 去除首尾空白字符 1.3 .lazy 作用是 数据将不在进行双向绑定

(3) 语法糖 v-model 相当于 给元素绑定input事件以及 获取value值 @input + value = v-model

语法糖就是拿来直接快速使用 因此v-model 和 .sync 俗称 语法糖