【06】Vue基础：v-model的使用

基础用法

模版写法：

<input v-model="message">

js写法：

var vm = new Vue({
    el: '#app',
    data() {
        return {
            message: '123'
        }
    }
})

在浏览器运行此文件后，在文本框输入内容时可以看到文本框下面的内容也在跟着变化，这是因为 v-model 指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素。

注意：v-model 会忽略所有表单元素的 value、checked、selected、attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

常见修饰符

修饰符	说明
.lazy	取代 input 监听 change 事件。
.number	输入字符串转为数字。
.trim	输入去掉首尾空格。

模版写法：

<input v-model.trim="msg">

js写法：

var vm = new Vue({
    el: '#app',
    data() {
        return {
            message: '123'
        }
    }
})

在浏览器运行此文件后，可以看到在文本框的头和尾输入空格是无效的。