• v-model

    1，v-model的基本使用

    1.         <input type="text" v-model="msg">
    2.         <h2>{{msg}}h2>

     v-model 双向绑定 只要input框的值发生改变，则h2中的ms的值也会同时发生改变

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9.     <script src="./vue.js">script>
    10. head>
    11.  
    12. <body>
    13.     <div id="app">
    14.         
    15.         <input type="text" v-model="msg">
    16.         <h2>{{msg}}h2>
    17.     div>
    18.     <script>
    19.         var vm = new Vue({
    20.             el:'#app',
    21.             data(){
    22.                 return{
    23.                     msg:'猜猜我会怎么变化'
    24.                 }
    25.             }
    26.         })
    27.     script>
    28. body>
    29.  
    30. html>

    效果图

     2，v-model的底层原理

    首先 来创建有一个小deom， 不用v-model来实现双向绑定

    <input type="text"  @input="changeValue"  :value="msg">

    底层的原理就是：用到了oninput方法，用户在输入的时候触发，同时用到v-bind来绑定的

    1.     <div id="app">
    2.         
    3.         
    4.         <input type="text"  @input="changeValue"  :value="msg">
    5.        
    6.         <h2>{{msg}}h2>
    7.  
    8.     div>
    9.     <script>
    10.         var vm = new Vue({
    11.             el:'#app',
    12.             data(){
    13.                 return{
    14.              msg:'我可是没有用v-model来实现的哦!'
    15.                 }
    16.             },methods:{
    17.                 changeValue(event){
    18.                     this.msg=event.target.value
    19.                 }
    20.             }
    21.         })
    22.     script>

    3，v-model的修饰符的使用 

    1. lazy：默认情况下是实时更新数据加上lazy，从输入框失去焦点按下enter都会更新数据。
    2. number：默认是string类型，使用number复制为number类型。
    3. trim：用于自动过滤用户输入的首尾空白字符
    1.     <h2>v-model修饰符h2>
    2.     <h3>lazy,默认情况是实时更新数据，加上lazy，从输入框失去焦点，按下enter都会更新数据h3>
    3.     <input type="text" v-model.lazy="message">
    4.     <div>{{message}}div>
    5.     <h3>修饰符number,默认是string类型，使用number赋值为number类型h3>
    6.     <input type="number" v-model.number="age">
    7.     <div>{{age}}--{{typeof age}}div>
    8.     <h3>修饰符trim:去空格h3>
    9.     <input type="text" v-model.trim="name">

     js部分

    1.

    效果图 

     

     

    4， v-model结合select

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.   <title>v-model结合select类型title>
    8. head>
    9. <body>
    10.   <div id="app">
    11.     
    12.     <select name="fruit" v-model="fruit">
    13.       <option value="苹果">苹果option>
    14.       <option value="香蕉">香蕉option>
    15.       <option value="西瓜">西瓜option>
    16.     select>
    17.     <h2>你选择的水果是：{{fruit}}h2>
    18.  
    19.     
    20.     <select name="fruits" v-model="fruits" multiple>
    21.       <option value="苹果">苹果option>
    22.       <option value="香蕉">香蕉option>
    23.       <option value="西瓜">西瓜option>
    24.     select>
    25.     <h2>你选择的水果是：{{fruits}}h2>
    26.   div>
    27.   <script src="../js/vue.js">script>
    28.   <script>
    29.     const app = new Vue({
    30.       el:"#app",
    31.       data:{
    32.         fruit:"苹果",
    33.         fruits:[]
    34.       },
    35.  
    36.     })
    37.   script>
    38. body>

  • 相关阅读:
    HashMap 源码逐行分析，j + oldCap 桶位置重分配公式手写验证
    哈希表相关知识
    咖啡店怎么做才能赚钱？一个公式，简单粗暴简单做到
    java计算机毕业设计线上远程教学及自主学平台的设计与实现源程序+mysql+系统+lw文档+远程调试
    JS中4种常见的内存泄漏
    大型网站系统架构演化实例_6.使用分布式文件系统和分布式数据库系统
    智能座舱力拼「差异化」，各路芯片玩家再次引领新潮流
    这几个好用的去图片水印免费软件，你们知道吗？
    Ubuntu虚拟机部署OpenStack
    十几年Java“老油条”，教你如何才能把Java学好学透彻
  • 原文地址：https://blog.csdn.net/qq_52499703/article/details/126139358