v-model双向绑定和懒加载

---

一、v-model 双向数据绑定

1.双向数据绑定

labe标签for功能：表示Label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素将获取焦点。

代码如下（示例）：

 <div class="box">
        <label for="a">榴莲</label>
        <input type="checkbox" id="a" value="榴莲好贵" v-model="checkNames">
        <label for="b">西瓜</label>
        <input type="checkbox" id="b" value="西瓜好吃" v-model="checkNames">
        <label for="c">螺狮粉</label>
        <input type="checkbox" id="c" value="螺狮粉一言难尽" v-model="checkNames"></br>
        <span>{{ checkNames }}</span>
    </div>

 new Vue({
        el: "#app",
        data: {
            checkNames:[]
        }
    });

---

2.v-model.lazy 懒加载，鼠标失焦后，span标签可以获取到值

代码如下（示例）：

<div style="background-color: black;color: white">
        txt :<span> {{txt}} </span>
        输入框 ：<input type="txt" v-model.lazy="txt">
    </div>

 new Vue({
        el: "#app",
        data: {
            txt:''
        }
    });

---

3.v-model.trim 去掉输入的首尾空格

 <div style="background-color: black;color: white">
        txt :<span> {{txt}} </span>
        输入框 ：<input type="txt" v-model.trim="txt">
    </div>

---

总结

持续记录学习过程…daydayup…