v-model双向数据绑定小案例 (工作中经常用到)

效果图

代码：

<h1>花名册</h1>
    <h2>这是{{ uname}}的花名册</h2>
    <h3><font color="blue">{{ uname }}</font>的花名册</h3>
    <!-- 下边就是双向数据绑定  -->
    <!-- v-model：data里边需要给一个初始值   有的时候是数组有的是字符串  有的是null-->
    <p>
      <label for="">姓名:</label>
      <input type="text" v-model="uname" />
    </p>
    <p>
 data: function () {
    return {
      uname: "",
    };
  },

详解：

v-model:是什么？
是Vue框架的一种内置的API指令。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

为什么使用v-model?
v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理。

什么场景会使用v-model?
表单提交是开发中非常常见的功能，也是和用户交互的重要手段：比如用户在登录、注册时需要提交账号密码；比如用户在检索、创建、更新信息时，需要提交一些数据； 这些都要求我们可以在代码逻辑中获取到用户提交的数据，我们通常会使用v-model指令来完成

输完确定后才让它显示，这个时候用到修饰符.lazy：

当添加.lazy修饰符之后，改变input框中的内容并不会使得span中的内容发生变化，此时当输入框失去焦点后触发change事件.控制台中输出相应内容。
.lazy缺点:
加上.lazy后相当于 双向数据绑定不起作用了

效果图