Vue----双向绑定指令

文章目录

- - 3.7 双向绑定指令
  - - 3.7.1 v-model 指令的修饰符

3.7 双向绑定指令

vue提供了 v-model双向绑定指令 ，用来辅助开发者在 不操作DOM 的前提下，快速 获取表单数 据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 文本框的输入会实时更新到data中的username -->
        <input type="text" v-model="username">
        <!-- vue会把data中的username的数据实时绑定到标签中 -->
        <p>姓名：{{ username }}</p>
        <hr>
        <!-- 属性绑定，不能将文本框的输入实时更新到username中 -->
        <!-- 单向绑定 -->
        <!-- 只能vue实时把数据更新到标签中 -->
        <input type="text" :value="username">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js>vue.js"></script>
    <script>javascript">
        const vm = new Vue({
            el: '#app',
            data: {
                username: ''
            }
        })
    </script>
</body>
</html>

输入123

注意：
v-model指令只能配合表单元素一起使用。

3.7.1 v-model 指令的修饰符

为了方便对用户输入的内容进行处理，vue 为 v-model 指令提供了 3 个修饰符，分别是：

修饰符	作用	示例
.number	自动将用户的输入值转为数值类型	`<input v-model.number="age" />`
.trim	自动过滤用户输入的首尾空白字符	`<input v-model.trim="msg" />`
.lazy	在“change”时而非“input”时更新	`<input v-model.lazy="msg" />`

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      姓名：<input type="text" v-model.trim="username" />

      <hr />

      年龄：<input type="text" v-model.number="age" />

      <hr />

      地址：<input type="text" v-model.lazy="address" />
    </div>

    <script src="./lib/vue-2.6.12.js"></script>

    <script>javascript">
      const vm = new Vue({
        el: '#app',
        data: {
          // 姓名
          username: 'zs',
          // 年龄
          age: 1,
          // 地址
          address: '北京市',
        },
      })
    </script>
  </body>
</html>