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

1.简单使用:

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

<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  .trim

.lazy

  对于输入元素,默认的行为方式是一旦有数据变化,马上进行绑定。但是加上.lazy之后,相当于监听change操作,只有在失去焦点的时候,才会进行数据绑定了

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

.number

  有时候,拿到了数据需要进行数学运算, 为了保证运算结果,必须先把类型转换为number类型,而v-model默认是string类型,所以就可以通过.number方式确保获取到的是数字类型了。

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

.trim

  trim 去掉前后的空白

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

猜你喜欢

转载自www.cnblogs.com/crazy-lc/p/12245318.html