vue(五)--双向绑定（v-model）

时间 2020-02-02

标签 vue 双向绑定 model 繁體版

原文原文链接

1.简单使用：app

当input里面的值发生变化的时候，就会自动把变化后的值，绑定到Vue对象上去了spa

<body>
        <div id="app">
            <input v-model="name" />{{name}}<br />
            <textarea v-model="t"></textarea>{{t}}<br/>
            <input type="checkbox" v-model="c"/>{{c}}<br/>
            <input type="radio" id="one" value="One" v-model="r">
            <input type="radio" id="one" value="Two" v-model="r">
            {{r}}
        </div>
        <script>
            new Vue({
                el:'#app',
                data:{
                    name:'1',
                    t:'',
                    c:'',
                    r:''
                }
            })
        </script>
</body>

2.修饰符：.lazy .number .trim3d

.lazycode

　　对于输入元素，默认的行为方式是一旦有数据变化，立刻进行绑定。可是加上.lazy以后，至关于监听change操做，只有在失去焦点的时候，才会进行数据绑定了对象

<input v-model.lazy="name" />{{name}}<br />

.numberblog

　　有时候，拿到了数据须要进行数学运算，为了保证运算结果，必须先把类型转换为number类型，而v-model默认是string类型，因此就能够经过.number方式确保获取到的是数字类型了。ip

<input type="number" v-model.number="name" />{{name}}<br />

.triminput

　　trim 去掉先后的空白数学

<input v-model.trim="name" />{{name}}<br />