重走vue之表单的输入绑定

最新推荐文章于 2024-10-01 22:12:42 发布

季后的风

最新推荐文章于 2024-10-01 22:12:42 发布

阅读量92

点赞数

分类专栏： vue 文章标签： javascript es6

本文链接：https://blog.csdn.net/qq_40708840/article/details/109340108

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

表单的输入绑定

概述：用v-model指令在表单<input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model 会忽略所有表单元素的 value、checked、 selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值

单行文本框

<input v-model="message" placeholder="edit me">

多行文本框

<textarea v-model="message" placeholder="multiple lines"></textarea>

复选按钮

<input type="checkbox" value="Jack" v-model="checkedNames">
<input type="checkbox" value="John" v-model="checkedNames">

单选按钮

<input type="radio" value="One" v-model="picked">
 <input type="radio" value="Two" v-model="picked">

下拉菜单

<select v-model="selected">
     <option disabled value="">请选择</option> 
     <option>A</option>
      <option>B</option>
 </select>

修饰符

使用修饰符可以增加表单绑定能力

.lazy

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

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

.number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符

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

.trim

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

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

综上知识点，给出一个完整的实例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        {{msg}}
        <!-- <input type="text" v-model.lazy="stu.username">  
             加了lazy修饰是懒加载，只有触发change时才会实现数据的双向绑定
            加了trim则时去除前后置空的空格
         -->
         <!-- 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="playGame" v-model="stu.hobby">玩
        <br>
        <!-- 没有用multiple修饰的就是单选选择框，有就是多选选择框 -->
        <select name="" id="" v-model="stu.city">
            <option value="shanghai">上海</option>
            <option value="beijing">北京</option>
            <option value="guangzhou">广州</option>
        </select>
        <br>

        <textarea name="" id="" cols="30" rows="10" v-model="stu.info">123456</textarea>
        <br>

        {{stu}}
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                msg: "hello",
                stu: {
                    //多选框，因为刚开始取得是一个数组，所以需要给其提供默认数组，否则会报错
                    hobby: [],

                }
            }
        })
    </script>
</body>

</html>