Vue.js表单双向绑定-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41989717/article/details/108693090

表单输入绑定

用v-model指令在表单,及元素上创建双向数据绑定。他会根据表单控件类型自动选取正确的方法来更新元素。 v-model会忽略所有表单元素的value、checked、selected、attribute的初始值，总是将vue实例的数据作为数据来源。通过JavaScript在组件的data声名初始变量

1.单行文本框

    <div id='app'>
        <!--  v-model="stu.username"绑定在stu对象的username属性上 -->
        用户名：<input type="text" v-model="stu.username" />
    </div>
        <script>
            new Vue({
                el: "#app",
                data: {
                msg: "hello",
                stu: {
                    username: "zhangsan",
                },
                },
                methods: {},
            });
            </script>

2.多行文本框

     简介：  <textarea
                name=""
                id=""
                cols="30"
                rows="10"
                v-model="stu.info"
            ></textarea>

3.复选按钮

        <!-- 复选框需要默认给一个空数组 -->
        <!-- 同一组需要设定同一个v-model的值 -->
        <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" />跳舞、
        <script>
        new Vue({
            el: "#app",
            data: {
            msg: "hello",
            stu: {
                // 复选框需要默认给一个空数组
                hobby: [],
            },
            },
            methods: {},
        });
        </script>

4.单选按钮

        <!-- v-model="stu.gender" 两个单选框绑定同一个v-model的值，为一组 -->
        性别： <input type="radio" value="male" v-model="stu.gender" />男
        <input type="radio" value="female" v-model="stu.gender" />女
    5.下拉菜单
        <!-- multiple多选 不需要提供默认数组 -->
        城市：<select name="" id="" v-model="stu.city">
            <option value="上海">上海</option>
            <option value="北京">北京</option>
            <option value="重庆">重庆</option>
            <option value="天津">天津</option>
        </select>

修饰符（使用修饰符可以增强表单的绑定能力）

1.lazy

        默认情况下，v-model在每次input事件触发之后将输入框的值与数据进行同步，
        可以添加lazy修饰符，从而转为change事件之后同步
         <!-- .lazy修饰符 当光标移出输入框才显示  -->
         <!-- 用户名：<input type="text" v-model.lazy="stu.username" />

2.number

        自动将用户输入值转为数值类型
         <!--.number修饰符，可以将采集到的数据转为number类型，然后采集到数据模型中  -->
        年龄：<input type="text" v-model.number="stu.age" />

3.trim

        自动过滤用户的输入的首尾空白字符
        <!-- .trim修饰符，将采集到的数据取出前后空格在显示 -->
        用户名：<input type="text" v-model.trim="stu.username" />

例子代码：

<!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-2.6.12.js"></script>
  </head>
  <body>
    <div id="app">
      {{msg}}
      <br /><br />
      {{stu}}
      <br /><br />
      <!-- 用户名 -->
      <!--  v-model="stu.username"绑定在stu对象的username属性上 -->
      <!-- .lazy修饰符 当光标移出输入框才显示  -->
      <!-- .trim修饰符，将采集到的数据取出前后空格在显示 -->
      <!-- 用户名：<input type="text" v-model.lazy="stu.username" /> <br /><br /> -->
      用户名：<input type="text" v-model.trim="stu.username" /> <br /><br />
      <!-- 年龄 -->
      <!--.number修饰符，可以将采集到的数据转为number类型，然后采集到数据模型中  -->
      年龄：<input type="text" v-model.number="stu.age" /> <br /><br />
      <!-- 性别  单选框-->
      <!-- v-model="stu.gender" 两个单选框绑定同一个v-model的值，为一组 -->
      性别： <input type="radio" value="male" v-model="stu.gender" />男
      <input type="radio" value="female" v-model="stu.gender" />女 <br /><br />
      <!-- 爱好 复选框 -->
      <!-- 复选框需要默认给一个空数组 -->
      <!-- 同一组需要设定同一个v-model的值 -->
      <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 /><br />
      <!-- 城市 下拉列表 -->
      <!-- multiple多选 不需要提供默认数组 -->
      城市：<select name="" id="" v-model="stu.city">
        <option value="上海">上海</option>
        <option value="北京">北京</option>
        <option value="重庆">重庆</option>
        <option value="天津">天津</option>
      </select>
      <br /><br />
      <!-- textarea 简介 -->
      简介：<textarea
        name=""
        id=""
        cols="30"
        rows="10"
        v-model="stu.info"
      ></textarea>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          msg: "hello",
          stu: {
            username: "zhangsan",
            // age: 12,
            // 复选框需要默认给一个空数组
            hobby: [],
          },
        },
        methods: {},
      });
    </script>
  </body>
</html>