Vue研习录（06）——表单输入绑定详解及示例分析

---

版权声明

• 本文原创作者：清风不渡
• 博客地址：https://blog.csdn.net/WXKKang

---

  重拾前端记忆，记录学习笔记，现在进入表单输入绑定部分

一、监听事件

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

<template>
  <div class="hello">
    <input type="text" v-model="message">
    <p>message is : {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message : ""
    }
  }
}
</script>

  结果如下，v-model会自动监听我们的输入值并赋值给message在页面上予以展示：

二、修饰符

1、 .lazy

  在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步。我们可以使用.lazy修饰符，从而转为在change事件之后进行同步，示例如下：

<template>
  <div class="hello">
    <input type="text" v-model.lazy="message">
    <p>message is : {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message : ""
    }
  }
}
</script>

  结果如下，v-model会在输入完毕并“回车”，输入框失去焦点之后才会获取输入的内容：

2、 .trim

  我们可以使用.trim修饰符来自动过滤用户输入的首尾空白字符，示例如下：

<template>
  <div class="hello">
    <input type="text" v-model.trim="message">
    <p>message is : {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message : ""
    }
  }
}
</script>

  结果如下，当我们在首尾输入空白字符时，会自动过滤：

3、 .number

  如果你想让用户输入自动转换为数字，你可以在 v-model 后添加 .number 修饰符来管理输入。
  如果该值无法被 parseFloat() 处理，那么将返回原始值。
  number 修饰符会在输入框有 type=“number” 时自动启用。

三、其他表单事件

1、多行文本

<template>
  <div class="hello">
    <textarea v-model="message" placeholder="add multiple lines"></textarea>
    <p>Multiline message is:</p>
    <p style="white-space: pre-line;">{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message : ""
    }
  }
}
</script>

2、复选框

  单一的复选框，绑定布尔类型值：

<template>
  <div class="hello">
    <input type="checkbox" id="checkbox" v-model="checked" />
    <label for="checkbox">{{ checked }}</label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked : true
    }
  }
}
</script>

  多个复选框绑定到同一个数组或集合的值：

<template>
  <div class="hello">
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>

    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>

    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>

    <p>Checked names: {{ checkedNames }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkedNames: []
    }
  }
}
</script>

3、单选按钮

<template>
  <div class="hello">
    <input type="radio" id="one" value="One" v-model="picked" />
    <label for="one">One</label>

    <input type="radio" id="two" value="Two" v-model="picked" />
    <label for="two">Two</label>

    <div>Picked: {{ picked }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      picked: ""
    }
  }
}
</script>

4、下拉列表

  单选下拉列表绑定值

<template>
  <div class="hello">
    <div>Selected: {{ selected }}</div>

    <select v-model="selected">
      <option disabled value="">Please select one</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>

  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: ""
    }
  }
}
</script>

  多选下拉列表绑定到数组

<template>
  <div class="hello">
    <div>Selected: {{ selected }}</div>

    <select v-model="selected" multiple id="selected">
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>

  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: []
    }
  }
}
</script>

<style>
  #selected{
    width: 80px;
  }

</style>