• v-model的使用

    1. v-model的基本使用

    1. DOCTYPE html>
    4.   
    5.   Title
    9.   {{message}}

    • ​ v-model双向绑定，既输入框的value改变，对应的message对象值也会改变，修改message的值，input的value也会随之改变。无论改变那个值，另外一个值都会变化。

    2. v-model的原理

    1. DOCTYPE html>
    4.   
    5.   Title
    9.   
    11.   
    12.   {{message}}

    • 先来一个demo实现不使用v-model实现双向绑定。

    ​ v-model = v-bind + v-on，实现双向绑定需要是用v-bind和v-on，使用v-bind给input的value绑定message对象，此时message对象改变，input的值也会改变。但是改变input的value并不会改变message的值，此时需要一个v-on绑定一个方法，监听事件，当input的值改变的时候，将最新的值赋值给message对象。$event获取事件对象，target获取监听的对象dom，value获取最新的值。

    3. v-model结合radio类型使用

    1.   
      "app">
    2.     
    3.     <label for="male">
    4.       <input type="radio" id="male" name="sex" value="男" v-model="sex">男
    5.     label>
    6.     <label for="female">
    7.         <input type="radio" id="female" name="sex" value="女" v-model="sex">女
    8.     label>
    9.     <div>你选择的性别是：{{sex}}div>
    10.  
    11.   div>
    12.   <script src="../js/vue.js">script>
    13.   <script>
    14.     const app = new Vue({
    15.       el:"#app",
    16.       data:{
    17.         message:"zzz",
    18.         sex:"男"
    19.       },
    20.  
    21.     })
    22.   script>

    ​ radio单选框的name属性是互斥的，如果使用v-model，可以不使用name就可以互斥。

    v-model绑定`sex`属性，初始值为“男”，选择女后`sex`属性变成“女”，因为此时是双向绑定。

    4. v-model结合checkbox类型使用 

    1. DOCTYPE html>
    4.   
    5.   Title
    9.   
    10.   
      多选框
    11.   
    12.     {{item}}
    13.   
    14.   
      你的爱好是：{{hobbies}}
    1. checkbox结合v-model实现单选框，定义变量isAgree初始化为false，点击checkbox的值为true，isAgree也是true。
    2. checkbox结合v-model实现多选框，定义数组对象hobbies，用于存放爱好，将hobbies与checkbox对象双向绑定，此时选中，一个多选框，就多一个true，hobbies就添加一个对象。

    5. v-model结合select

    1. DOCTYPE html>
    4.   
    5.   
    6.   
    7.   v-model结合select类型
    10.   
    11.     
    12.     
    13.     
      你选择的水果是：{{fruit}}
    14.  
    15.     
    16.     
    17.     
      你选择的水果是：{{fruits}}
    18.

    • ​ v-model结合select可以单选也可以多选。

    6. v-model的修饰符的使用

    1. DOCTYPE html>
    4.   
    5.   
    6.   
    7.   v-model修饰符
    10.   
    11.     
      v-model修饰符
    12.     
      lazy,默认情况是实时更新数据，加上lazy，从输入框失去焦点，按下enter都会更新数据
    13.     
    14.     
      {{message}}
    15.     
      修饰符number,默认是string类型，使用number赋值为number类型
    16.     
    17.     
      {{age}}--{{typeof age}}
    18.     
      修饰符trim:去空格
    19.     
    20.  
    21.   
    23.
    1. lazy：默认情况下是实时更新数据，加上lazy，从输入框失去焦点，按下enter都会更新数据。
    2. number：默认是string类型，使用number复制为number类型。
    3. trim：用于自动过滤用户输入的首尾空白字符

  • 相关阅读:
    卷积相关知识
    LeetCode 1189. “气球” 的最大数量---unordered_map和字符串计数
    力扣题解（54. 螺旋矩阵），带注释
    uniapp:小程序数字键盘功能样式实现
    二叉树的后序遍历-力扣
    LINUX之进程管理
    你是否了解Spring @EventListener注解?
    直播预告 | YashanDB 2023年度发布会正式定档11月2日，邀您共同见证国产数据库发展实践！
    kubernetes|云原生| 如何优雅的重启和更新pod---pod生命周期管理实务
    WIN10 NPM的安装
  • 原文地址：https://blog.csdn.net/m0_59359854/article/details/126143654