Vue学习篇(八)—表单绑定

最新推荐文章于 2024-05-10 14:11:23 发布

云澈丿

最新推荐文章于 2024-05-10 14:11:23 发布

阅读量412

点赞数 1

分类专栏：前端前端框架文章标签： javascript css vue.js html

本文链接：https://blog.csdn.net/weixin_45333934/article/details/107457270

版权

前端同时被 2 个专栏收录

26 篇文章 1 订阅

订阅专栏

前端框架

23 篇文章 1 订阅

订阅专栏

Vue Day 08——表单绑定v-model

概述

v-model的基本使用
v-model和radio/checkbox/select
修饰符

8.1. v-model的基本使用

表单控件在实际开发中是非常常见的。特别是对于用户信息的提交，需要大量的表单。
Vue中使用v-model指令来实现表单元素和数据的双向绑定。
案例的解析：

当我们在输入框输入内容时
因为input中的v-model绑定了message，所以会实时将输入的内容传递给message，message发生改变。
当message发生改变时，因为上面我们使用Mustache语法，将message的值插入到DOM中，所以DOM会发生响应的改变。
所以，通过v-model实现了双向的绑定。

<div id="app">
  <!--  <input type="text" v-model="message">-->
  {{message}}
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
    }
  })
</script>

当然，我们也可以将v-model用于textarea元素

8.2. v-model原理

v-model其实是一个语法糖，它的背后本质上是包含两个操作：

v-bind绑定一个value属性
v-on指令给当前元素绑定input事件

也就是说下面的代码：等同于下面的代码：

<input type="text" v-model="message">
等同于
<input type="text" v-bind:value="message" v-on:input="message = $event.target.value">

<!--  利用单向绑定+input输入事件实现双向绑定-->
<!--  <input type="text" :value="message" v-on:input="valueChage">-->
  <input type="text" :value="message" @input="message = $event.target.value">
  <!--  v-mode双向绑定，改变message其中之一，所有的message都会发生改变-->
  <!--  <input type="text" v-model="message">-->
  {{message}}

8.3. v-model和radio/checkbox/select

8.3.1. radio

当存在多个单选框时

<!--  结合radio-->
  <label for="male">
    <input type="radio" id="male" name="sex" value="男" v-model="sex">男
  </label>
  <label for="female">
    <input type="radio" id="female" name="sex" value="女" v-model="sex">女
  </label>
<!--  绑定v-model后（没有绑定则必须要，才能保持互斥性）。name属性可以不要，仍然可以保持互斥性-->
  <h2>您选择的性别是：{{sex}}</h2>

8.3.2. checkbox

复选框分为两种情况：单个勾选框和多个勾选框
单个勾选框：

v-model即为布尔值。
此时input的value并不影响v-model的值。

多个复选框：

当是多个复选框时，因为可以选中多个，所以对应的data中属性是一个数组。
当选中某一个时，就会将input的value添加到数组中。

<!--  结合CheckBox-->
  <label for="agree">
    <input type="checkbox" id="agree" v-model="isAgree">同意协议
  </label>
  <h2>您选则的是：{{isAgree}}</h2>
  <button :disabled="!isAgree">下一步</button>
<br>
<br>
<!--  多选框-->
  <label for="">
    <input type="checkbox" value="篮球" v-model="hobbies">篮球
    <input type="checkbox" value="足球" v-model="hobbies">足球
    <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
    <input type="checkbox" value="排球" v-model="hobbies">排球
    <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
  </label>
  <h2>您的爱好是;{{hobbies}}</h2>
<!--  采用值绑定，不动态的写死一件东西-->
  <label v-for="item in orginHobbies">
    <input type="checkbox" :value="item" v-model="hobbies1">{{item}}
  </label>
  <h2>您的爱好是;{{hobbies1}}</h2>

8.3.3. select

和checkbox一样，select也分单选和多选两种情况。
单选：只能选中一个值。

v-model绑定的是一个值。
当我们选中option中的一个时，会将它对应的value赋值到mySelect中

多选：可以选中多个值。

v-model绑定的是一个数组。
当选中多个值时，就会将选中的option对应的value添加到数组mySelects中

  <select name="abc" id="" v-model="fruit">
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="榴莲">榴莲</option>
    <option value="葡萄">葡萄</option>
  </select>
  <h2>您选择的水果是: {{fruit}}</h2>
<!--多选-->
  <br>
  br
  <select name="abc" id="abc" v-model="fruits" multiple>
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="榴莲">榴莲</option>
    <option value="葡萄">葡萄</option>
  </select>
  <h2>您选择的水果是: {{fruits}}</h2>

8.4. 值绑定

初看Vue官方值绑定的时候，我很疑惑：what the hell is that？
但是仔细阅读之后，发现很简单，就是动态的给value赋值而已：

我们前面的value中的值，可以回头去看一下，都是在定义input的时候直接给定的。
但是真实开发中，这些input的值可能是从网络获取或定义在data中的。
所以我们可以通过v-bind:value动态的给value绑定值。
这不就是v-bind吗？

这不就是v-bind在input中的应用吗？搞的我看了很久，搞不清他想讲什么。
这里不再给出对应的代码，因为会用v-bind，就会值绑定的应用了。

8.5. 修饰符

lazy修饰符：

默认情况下，v-model默认是在input事件中同步输入框的数据的。
也就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变。
lazy修饰符可以让数据在失去焦点或者回车时才会更新：

number修饰符：

默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。
但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。
number修饰符可以让在输入框中输入的内容自动转成数字类型：

trim修饰符：

如果输入的内容首尾有很多空格，通常我们希望将其去除
trim修饰符可以过滤内容左右两边的空格

<!--  修饰符的使用-->
<!--  lazy:实现双向绑定的那个那个组件在失去焦点时或者用户敲击回车之后进行绑定，实现不动态绑定频繁的效果-->
  <input type="text" v-model.lazy="message1">
  <h2>{{message1}}</h2>
  <br>
  <hr>
<!--  number:(默认情况下v-model绑定的变量类型都是String类型),实现动态的改变变量的类型-->
  <input type="number" v-model.number="age">
  <h2>{{age}}——{{typeof age}}</h2>

  <br>
  <hr>
<!--  trim：消除字符串两边的空格-->
  <input type="text" v-model.trim="name">
  <h2>您输入的名字：{{name}}</h2>

8.6. 以上综合代码

<div id="app">
<!--  利用单向绑定+input输入事件实现双向绑定-->
<!--  <input type="text" :value="message" v-on:input="valueChage">-->
  <input type="text" :value="message" @input="message = $event.target.value">
  <!--  v-mode双向绑定，改变message其中之一，所有的message都会发生改变-->
  <!--  <input type="text" v-model="message">-->
  {{message}}

<br>
<!--  结合radio-->
  <label for="male">
    <input type="radio" id="male" name="sex" value="男" v-model="sex">男
  </label>
  <label for="female">
    <input type="radio" id="female" name="sex" value="女" v-model="sex">女
  </label>
<!--  绑定v-model后（没有绑定则必须要，才能保持互斥性）。name属性可以不要，仍然可以保持互斥性-->
  <h2>您选择的性别是：{{sex}}</h2>

  <br>

<!--  结合CheckBox-->
  <label for="agree">
    <input type="checkbox" id="agree" v-model="isAgree">同意协议
  </label>
  <h2>您选则的是：{{isAgree}}</h2>
  <button :disabled="!isAgree">下一步</button>
<br>
<br>
<!--  多选框-->
  <label for="">
    <input type="checkbox" value="篮球" v-model="hobbies">篮球
    <input type="checkbox" value="足球" v-model="hobbies">足球
    <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
    <input type="checkbox" value="排球" v-model="hobbies">排球
    <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
  </label>
  <h2>您的爱好是;{{hobbies}}</h2>
<!--  采用值绑定，不动态的写死一件东西-->
  <label v-for="item in orginHobbies">
    <input type="checkbox" :value="item" v-model="hobbies1">{{item}}
  </label>
  <h2>您的爱好是;{{hobbies1}}</h2>
  <br>
  <select name="abc" id="" v-model="fruit">
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="榴莲">榴莲</option>
    <option value="葡萄">葡萄</option>
  </select>
  <h2>您选择的水果是: {{fruit}}</h2>
<!--多选-->
  <br>
  br
  <select name="abc" id="abc" v-model="fruits" multiple>
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="榴莲">榴莲</option>
    <option value="葡萄">葡萄</option>
  </select>
  <h2>您选择的水果是: {{fruits}}</h2>

  <br>
<!--  修饰符的使用-->
<!--  lazy:实现双向绑定的那个那个组件在失去焦点时或者用户敲击回车之后进行绑定，实现不动态绑定频繁的效果-->
  <input type="text" v-model.lazy="message1">
  <h2>{{message1}}</h2>
  <br>
  <hr>
<!--  number:(默认情况下v-model绑定的变量类型都是String类型),实现动态的改变变量的类型-->
  <input type="number" v-model.number="age">
  <h2>{{age}}——{{typeof age}}</h2>

  <br>
  <hr>
<!--  trim：消除字符串两边的空格-->
  <input type="text" v-model.trim="name">
  <h2>您输入的名字：{{name}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      //radio
      sex: '',
      isAgree: false,
      hobbies: [],
      hobbies1: [],
      orginHobbies: ['篮球', '足球', '乒乓球', '排球'],
      fruit: '香蕉',
      fruits: [],
      //修饰符使用
      message1: '战神觉',
      age: 0,
      name: ''
    },
    methods: {
      valueChage(event){
        this.message = event.target.value;
      }
    }
  })
</script>

云澈丿

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue学习篇(八)—表单绑定

用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
复制链接

扫一扫