07-Vue基础-表单控件

表单控件

1. 表单控件的基本使用

使用v-model在表单控件上进行双向数据绑定，什么是双向数据绑定呢？即表单输入的数据改变会影响绑定的变量的数据，绑定的数据的变量的改变会影响表单的数据改变。例如：

<body>
    <div id="app">
        <input type="text" name="content" id="content" v-model="message" placeholder="请输入">
        <p>输入的内容是：{{ message }}</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: ''
            }
        });
    </script>
</body>

单选按钮控件

<body>
    <div id="app">
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                picked: 'js'
            }
        });
    </script>
</body>

当选择的值改变时，v-model跟着改变，而且会选中当前项。

单选按钮绑定值：

<body>
    <div id="app">
        <input type="radio" v-model="picked" :value="value">
        <label for="radio">单选按钮</label>
        <p>{{ picked }}</p>
        <p>{{ value }}</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                picked: false,
                value: 'hello'
            }
        });
    </script>
</body>

复选框

<body>
    <div id="app">
        <input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2">
        <label for="radio">复选框</label>
        <p>{{ toggle }}</p>
        <p>{{ value1 }}</p>
        <p>{{ value2 }}</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                toggle: false,
                value1: 'a',
                value2: 'b',
            }
        });
    </script>
</body>

选择列表：

<body>
    <div id="app">
        <select v-model=selected>
            <option :value="{ number: 123 }">123</option>
        </select>
        {{ selected.number }}
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                selected: ''
            }
        });
    </script>
</body>

2. 修饰符

.lazy

在输入框中，v-model默认是在input事件中同步输入框的数据，使用修饰符.lazy会转变在change事件中的同步。如下所示：

<body>
    <div id="app">
        <input type="text" v-model.lazy="message">
        <p>{{ message }}</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: ''
            }
        });
    </script>
</body>

上面的示例，message并不是时时改变的，而是在失去焦点或按回车时才更新。

.number

使用修饰符.number可以将输入转换为Number类型，否者输入的结果类型始终为String类型，使用.number在数字输入框比较有用。如下所示：

<body>
    <div id="app">
        <input type="number" v-model.number="message">
        <!-- typeof 可以检测 message 类型 -->
        <p>{{ typeof message }}</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 123
            }
        });
    </script>
</body>

.trim

.trim修饰符可以自动过滤输入的首尾空格，示例代码如下：

<body>
    <div id="app">
        <input type="text" v-model.trim="message">
        <p>{{ message }}</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: ''
            }
        });
    </script>
</body>

当你的才华撑不起你的野心，那就努力学习吧！

posted on 2020-01-22 09:43 cculin 阅读(116) 评论(0) 收藏举报