Vue表单的值绑定和修饰符

1.值绑定

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
        <title>值绑定</title>
    </head>
    <body>
        <div id="app">
            <!-- 当选中时，`picked` 为字符串 "a" -->
            <input type="radio" v-model="picked" value="a">
            <!-- 当选中时，`picked` 为字符串 "b" -->
            <input type="radio" v-model="picked" value="b">
            <br />

            <!-- `toggle` 为 true 或 false -->
            <input type="checkbox" v-model="toggle" true-value="yes" false-value="no">
            <br />

            <!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
            <select v-model="selected">
                <option disabled value="">请选择</option>
                <option value="abc1">ABC1</option>
                <option value="abc2">ABC2</option>
                <option value="abc3">ABC3</option>
            </select>
        </div>
    </body>
</html>
<script type="text/javascript" charset="utf-8">
    var app = new Vue({
        el: "#app",
        data: {
            picked: 'a',
            toggle: 'no',
            selected: 'abc2',
        },
    });
</script>

 

2.修饰符

2.1、.lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。

你可以添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步：

2.2、.number

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

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

2.3、.trim

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
        <title>修饰符</title>
    </head>
    <body>
        <div id="app">
            <!-- 在“change”时而非“input”时更新 -->
            <input v-model.lazy="msg" placeholder="v-model.lazy">

            <!-- 自动将用户的输入值转为数值类型 -->
            <input v-model.number="age" type="number" placeholder="v-model.number">

            <!-- 自动过滤用户输入的首尾空白字符 -->
            <input v-model.trim="text" placeholder="v-model.trim">
        </div>
    </body>
</html>
<script type="text/javascript" charset="utf-8">
    var app = new Vue({
        el: "#app",
        data: {
            msg: '',
            age: '',
            text: ''
        },
    });
</script>

 

posted @ 2020-05-28 02:25  杵臼  阅读(414)  评论(0)  编辑  收藏  举报