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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>常用指令v-model</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div class="app">
        <!-- 数据绑定 -->
        {{name}}----{{age}}----{{sex}}
        <!-- 双向数据绑定 -->
        <div></div>
        <input type="text" v-model="name">
        <select v-model="age">
            <option value="01">01</option>
            <option value="02">02</option>
        </select>
        <div></div>
        男<input type="radio" value="man" v-model="sex"> 女
        <input type="radio" value="women" v-model="sex">

    </div>
    <script>
        var vm = new Vue({
            el: '.app', //指定关联的元素
            data: { //存储数据
                name: 'Leechoy',
                age: '28',
                sex: '男'
            }
        });
    </script>
</body>

</html>

v-model与修饰符

  • .lazy
    添加.lazy之后，会把 oninput 事件改成 onchange 事件。 lazy不会即实双向绑定 ，当输入框失去焦点时才实现双向绑定
  • .number
    number会自动切换用户输入为数值类型。需要注意的是，如果输入的第一个字是字符串，那number这个修饰符就不会生效，输入的第一个只能是数字或者小数点或者是正负号
  • trim
    .trim自动过滤用户输入的首位空白字符
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-model 与修饰符</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div class="app">
        <label for="a">.lazy修饰符</label>
        <!-- 在添加了.lazy之后，会把 oninput 事件改成 onchange 事件 -->
        <!-- .lazy 当输入框失去焦点时实现双向绑定，不会随时改变 -->
        <input type="text" v-model.lazy='text' id="a">
        <div>内容为：{{text}}</div>
        <div></div>
        <!-- .trim自动过滤用户输入的首位空白字符 -->
        <label for="b">.trim修饰符</label>
        <input type="text" v-model.trim='text1' id="b">
        <div>内容为：{{text1}}</div>
        <div></div>
        <!-- 需要注意的是，如果输入的第一个字是字符串，那number这个修饰符就不会生效。 -->
        <!-- 输入的第一个只能是数字或者小数点或者是正负号 -->
        <label for="b">.number修饰符</label>
        <input type="text" v-model.number='text2' id="b">
        <div>内容为：{{text2}}</div>
    </div>
    <script>
        var vm = new Vue({
            el: '.app', //指定关联的元素
            data: { //存储数据
                text: '',
                text1: '',
                text2: ''
            }
        });
    </script>
</body>

</html>

lazy演示

v-model数据双向绑定_修饰符

trim演示

v-model数据双向绑定_html_02

number演示

v-model数据双向绑定_双向绑定_03