Vue表单事件

　　v-model指定可以实现表单值与属性的双向绑定。即表单元素中更改的值会自动的更新属性中的值，属性中的值发生变化会自动更新表单里的值。

　　绑定的属性和事件

　　　　v-model在内部输入不同的元素使用不同的属性并抛出不同的事件。
  1.     text和textarea元素使用value属性和input事件；
  2.     checkbox和redio使用checked属性和change事件；
  3.     select字段将value作为prop并将change作为事件；

　　修饰符：

  1. .lazy：在默认情况下，v-model每次input事件触发后，将输入框的值与数据进行同步（除了上述输入法组合文字时）。当添加修饰符：.lazy后，将转变为使用change事件进行同步。

  2. .number： 将用户输入的值转变为数值形式，自动删除非数值的值，只保留数值。该修饰符只在 type="number"时有效。
  3. .tirm：自动过滤掉用户输入的首尾空白字符。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <title>Vue表单事件</title>
</head>

<body>
    <h4>绑定的属性和事件</h4>
    <div id="app">
        <h5>checkbox：</h5>
        <div>
            请选择四大名著：
            <input type="checkbox" value="西游记" v-model="choose_2">西游记
            <input type="checkbox" value="红楼梦" v-model="choose_2">红楼梦
            <input type="checkbox" value="数据结构" v-model="choose_2">数据结构
        </div>
        <p>您选择的是：{{choose_2}}</p>
        <h5>select：</h5>
        <div>
            <select v-model="sex">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
            您选择的性别是：{{sex}}
        </div>


        <h4>修饰符：</h4>
        <h5>.lazy</h5>
        <div>
            <input type="text" v-model.lazy="msg">
            您输出的值是：{{msg}}
        </div>

        <h5>.number</h5>
        type="number"时有效。
        <input type="number" v-model.number="age">
        您输出的年龄是：{{age}}

        <h5>.tirm</h5>
        <input type="text" v-model.tirm="msg_2"><br>
        您输入的内容为：{{msg_2}}
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                choose_2: [],
                sex: '',
                msg: '',
                age: '',
                msg_2: '',
            }
        })
    </script>
</body>

</html>

 

 
posted @ 2020-02-20 17:24  xsan  阅读(1163)  评论(0)  编辑  收藏  举报