【猿说VUE】Vue基础之表单介绍

最新推荐文章于 2022-09-23 17:14:30 发布

黑白猿

最新推荐文章于 2022-09-23 17:14:30 发布

阅读量1.7w

点赞数 1

分类专栏：前端VUE 文章标签： VUE 前端开发表单元素单选复选

本文链接：https://blog.csdn.net/gavinbj/article/details/105692971

版权

前端VUE 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

10 VUE基础：表单输入

可以用v-model指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定，v-model会根据控件类型自动选取正确的方法来更新元素。v-model主要负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model会忽略所有表单元素的 value、checked、selected 等属性的初始值而总是将Vue实例的数据作为数据来源，所以需要通过JavaScript在组件的data选项中声明初始值。

v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件：

text 和 textarea 元素使用 value 属性和 input 事件；
checkbox 和 radio 使用 checked 属性和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

10.1 控件示例

文本控件：

<span>用户名: </span>
<input type="text" v-model="username" placeholder="用户名"><br>

密码控件：

<span>密码: </span>
<input type="password" v-model="pwd" placeholder="密码"><br>

单选按钮：

<span>性别: </span>
<input type="radio" id="female" value="女" v-model="sex"><label for="female">女</label>
<input type="radio" id="male" value="男" v-model="sex"><label for="male">男</label><br>

复选按钮：

<span>爱好: </span>
<input type="checkbox" id="basket" value="basket" v-model="likes"><label for="basket">篮球</label>
<input type="checkbox" id="foot" value="foot" v-model="likes"><label for="foot">足球</label>
<input type="checkbox" id="pingpang" value="pingpang" v-model="likes"><label for="pingpang">乒乓</label><br>

下拉框：

<span>工作意愿城市: </span>
<select v-model="cityId">
    <option value="">未选择</option>
    <option :value="city.id" v-for="(city, index) in allCitys" :key="city.id">{{city.name}}</option>
</select><br>

多行文本：

<span>个人介绍: </span>
<textarea rows="10" v-model="personinfo"></textarea><br><br>

10.2 修饰符

[.lazy]：在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步，可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步。

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">

[.number]：自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符。

<input v-model.number="age" type="number">

这通常很有用，因为即使在 type="number" 时，HTML输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。

[.trim]：如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<input v-model.trim="msg">

10.3 示例代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>VUE之表单绑定</title>
  </head>
  <body>
    <div id="app">
      <form action="/xxx" @submit.prevent="handleSubmit">
        <span>用户名: </span>
        <input type="text" v-model="username" placeholder="用户名"><br>
    
        <span>密码: </span>
        <input type="password" v-model="pwd" placeholder="密码"><br>
    
        <span>性别: </span>
        <input type="radio" id="female" value="女" v-model="sex"><label for="female">女</label>
        <input type="radio" id="male" value="男" v-model="sex"><label for="male">男</label><br>
    
        <span>爱好: </span>
        <input type="checkbox" id="basket" value="basket" v-model="likes"><label for="basket">篮球</label>
        <input type="checkbox" id="foot" value="foot" v-model="likes"><label for="foot">足球</label>
        <input type="checkbox" id="pingpang" value="pingpang" v-model="likes"><label for="pingpang">乒乓</label><br>
    
        <span>工作意愿城市: </span>
        <select v-model="cityId">
          <option value="">未选择</option>
          <option :value="city.id" v-for="(city, index) in allCitys" :key="city.id">{{city.name}}</option>
        </select><br>
        
        <span>个人介绍: </span>
        <textarea rows="10" v-model="personinfo"></textarea><br><br>
    
        <input type="submit" value="确认">
      </form>
    </div>
  </body>

  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script type="text/javascript">
    const vm = new Vue({
      el: "#app",
      data: {
        username: '',
        pwd: '',
        sex: '男',
        likes: ['foot'],
        allCitys: [{id: 1, name: '北京'}, {id: 2, name: '上海'}, {id: 3, name: '广州'}],
        cityId: '2',
        personinfo: '毕业于XX大学'
      },
      methods: {
        handleSubmit(){
          console.log(this.username);
          console.log(this.sex);
        }
      }

    })
  </script>
</html>