VUE表单详解

最新推荐文章于 2024-09-23 09:54:04 发布

今天去学习了吗？

最新推荐文章于 2024-09-23 09:54:04 发布

阅读量308

点赞数

分类专栏： js ES6 前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_58620483/article/details/127014803

版权

前端同时被 3 个专栏收录

36 篇文章 3 订阅

订阅专栏

29 篇文章 0 订阅

订阅专栏

ES6

12 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js中的v-model指令在表单元素上的使用，包括文本输入、数字转换、单选按钮、复选框和下拉选择等场景。v-model通过双向数据绑定简化了用户输入事件的监听和数据同步。文章还展示了如何利用.trim、.lazy和.number修饰符进行特殊处理，并提供了实例代码展示其工作原理。

摘要由CSDN通过智能技术生成

表单

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

### html代码
<div id="app">
    {{msg}}
    <br>
    {{stu}}
    <br>
    <!-- 用户名：<input type="text" v-model.lazy="stu.username"> -->
    用户名：<input type="text" v-model.trim="stu.username">
    <br>
    <!-- .number修饰符，可以将采集到的数据转为number类型，然后再存储到数据模型中 -->
    年龄：<input type="text" v-model.number="stu.age">
    <br>
    <!-- 性别 -->
    性别：<input type="radio" value="male" v-model="stu.gender">男
    <input type="radio" value="female" v-model="stu.gender">女
    <br>
    <!-- 爱好 -->
    爱好：<input type="checkbox" value="basketball" v-model="stu.hobby">篮球
    <input type="checkbox" value="swimming" v-model="stu.hobby">游泳
    <input type="checkbox" value="dancing" v-model="stu.hobby">跳舞
    <br>
    <!-- 城市 -->
    城市：
    <!-- <select multiple v-model="stu.city"> -->
    <select v-model="stu.city">
      <option value="shanghai">上海</option>
      <option value="beijing">北京</option>
      <option value="guangzhou">广州</option>
    </select>
    <br>
    <!-- 简介 -->
    简介：<textarea v-model="stu.info" cols="30" rows="10"></textarea>
  </div>
### js代码
	new Vue({
      el: '#app',
      data: {
        msg: 'hello',
        stu: {
          // 复选框
          hobby: []
        }
      },
      methods: {}
    })