v-model的使用和原理

  • 表单控件在实际开发中还是非常常见的，特别是对于用户信息的提交，需要大量的表单
  • Vue中使用v-model指令来实现表单元素和数据的双向绑定
  • 当我们修改message的值时，input输入框中的内容也会跟着发生改变，同时，修改input输入框中的内容，页面上显示的 {{message}} 内容也会发生改变，这就是所谓的双向绑定，我们之前使用的 {{ }} 语法，只是实时将data中的数据显示在页面上，同时内容也会随着data中数据的变化而变化，但是自己主动修改页面上的内容，并不会改变data中的数据，可以理解为是单向的绑定 ```html
    {{message}} 

  2. - v-model的原理：其实v-model相当于两个指令的结合，而且，尽管不使用v-model，也可以实现双向绑定，如下
  3. ```html
  4. <div id="app">
  5.   <input type="text" :value="message" @input="valueChange">
  6.   <!-- 还可以直接在@input中写一个表达式，就不用使用方法了 -->
  7.   <input type="text" :value="message" @input="message = $event.target.value">
  8.   <h2>{{message}}</h2>
  9. </div>
  11. <script>
  12.   const app = new Vue({
  13.     el: '#app',
  14.     data: {
  15.       message: 'hello'
  16.     },
  17.     methods: {
  18.       valueChange(event) {
  19.         // event.target.value这个值就是我们在input框中实时输入的值
  20.         this.message = event.target.value
  21.       }
  22.     }
  23.   })
  24. </script>

v-model结合radio单选框使用

  • 如下例子就可以实现，将我们每次选择的结果保存到data中，然后提交到服务器进行下一步的处理
  • 加name属性的做法是我们之前的radio做法，现在两者v-model都绑定同一个data数据sex后，就可以不用写name属性了
  • 如果想在页面上默认给一个值，我们就直接给sex一个值，因为它是双向绑定的，单选按钮也会同时选中男 ```html

    您选择的性别是：{{sex}}

  2. <a name="dOlLM"></a>
  3. ## v-model结合checkbox使用
  5. - v-model结合checkbox单选框使用，用户同意协议才可以点击下一步，否则不能点击下一步<br />
  6. ```html
  7. <div id="app">
  8.   <!-- tips：这里用label包起来就可以点击文字也能选中，否则要点击图标才行 -->
  9.   <label for="protocol">
  10.     <input type="checkbox" id="protocol" v-model="isAgree">同意协议
  11.   </label>
  12.   <h2>您选择的是：{{isAgree}}</h2>
  13.   <button :disabled="!isAgree">下一步</button>
  14. </div>
  15. <script>
  16.   const app = new Vue({
  17.     el: '#app',
  18.     data: {
  19.       message: 'hello',
  20.       isAgree: false
  21.     }
  22.   })
  23. </script>

  • v-model结合checkbox复选框使用

    1. <div id="app">
    2. <input type="checkbox" value="篮球" v-model="hobbies">篮球
    3. <input type="checkbox" value="足球" v-model="hobbies">足球
    4. <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
    5. <input type="checkbox" value="网球" v-model="hobbies">网球
    7. <h2>您的爱好是：{{hobbies}}</h2> 
    8. </div>
    9. <script>
    10. const app = new Vue({
    11.   el: '#app',
    12.   data: {
    13.     message: 'hello',
    14.     hobbies: []
    15.   }
    16. })
    17. </script>


    v-model结合select使用

  1. <div id="app">
  2.   <!-- 选择一个 -->
  3.   <select name="aaa" v-model="fruit">
  4.     <option value="apple">apple</option>
  5.     <option value="orange">orange</option>
  6.     <option value="pineapple">pineapple</option>
  7.     <option value="banana">banana</option>
  8.   </select>
  9.   <h2>您选择的水果是：{{fruit}}</h2>
  11.   <!-- 选择多个 -->
  12.   <select name="aaa" v-model="fruits" multiple>
  13.     <option value="apple">apple</option>
  14.     <option value="orange">orange</option>
  15.     <option value="pineapple">pineapple</option>
  16.     <option value="banana">banana</option>
  17.   </select>
  18.   <h2>您选择的水果是：{{fruits}}</h2>
  19. </div>
  20. <script>
  21.   const app = new Vue({
  22.     el: '#app',
  23.     data: {
  24.       message: 'hello',
  25.       fruit: 'banana',
  26.       fruits: []
  27.     }
  28.   })
  29. </script>

值绑定

  • 其实这个概念就是：动态给input中的value属性绑定值
  • 我们之前使用input时，都是在写input时直接给定的，但是如果在真是开发中，这些input的value可能都是从网络获取或者定义在data中的
  • 所以我们可以通过v-bing:value动态给value绑定值，其实就是v-bind

v-model修饰符

  • .lazy：我们使用双向绑定时，如果不想要每次在input框中输入后都同步显示，而是想要等到输入完毕再进行同步的话，就使用v-model.lazy=””即可 ```html

    {{message}}

  2. - .number：v-model默认绑定的数据类型都是string类型，但是如果我们需要将其转化为number类型的话，就需要使用.number来进行处理，这样在使用这个值时就不需要类型转换了
  3. ```html
  4. <div id="app">
  5.   <input type="numner" v-model.number="age">
  6. </div>
  • .trim：用来去除字符串两边的空格
    1. <div id="app">
    2. <input type="numner" v-model.trim="message">
    3. </div>