vue-js-学习-7-表单输入绑定

lamirs2023年1月26日大约 2 分钟

上一级页面：vue-js-学习索引
本系列关注前端部分,根据学习路线图达到学习Vue.js的目的
developer路线图developer-roadmap/translations/chinese at master · kamranahmedse/developer-roadmap

前言

表单输入绑定

v-model

注意到

<input :value="text" @input="onInput">

方法如下：

methods: {
  onInput(e) {
    // v-on 处理函数会接收原生 DOM 事件
    // 作为其参数。
    this.text = e.target.value
  }
}

它们的等价写法，浓缩成下面的内容：

<input v-model="text">

v-model 会忽略任何表单元素上初始的 value、checked 或 selected attribute。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。你应该在 JavaScript 中使用data 选项来声明该初始值。

基本用法

对于需要使用 IME 的语言 (中文，日文和韩文等)，你会发现 v-model 不会在 IME 输入还在拼字阶段时触发更新。

如果你的确想在拼字阶段也触发更新，请直接使用自己的 input 事件监听器和 value 绑定而不要使用 v-model。详见：input - Web API 接口参考 | MDN (mozilla.org)

多行文本

注意在 <textarea> 中是不支持插值表达式的。请使用 v-model 来替代：

v-model 在文本类型的 <input> 和 <textarea> 元素会绑定 value property 并侦听 input 事件；

复选框、单选按钮、选择器

有印象就行，随用随查

值绑定

过一遍就行，用的时候随用随查

选择器选项

这里的内联对象字面量有点麻烦

<select v-model="selected">
  <!-- 内联对象字面量 -->
  <option :value="{ number: 123 }">123</option>
</select>

翻译过来就是

<script>
  data() {
    return {
      obj: {
	      number: 123,
      }
    };
  },
</script>

<template>
<select v-model="selected">
  <!-- 内联对象字面量 -->
  <option :value="Obj">123</option>
</select>
</template>

修饰符

这个知道怎么用就行，随用随查。

number 修饰符会在输入框有 type="number" 时自动启用。

组件上的 `v-model`

配合 v-model 使用 (vuejs.org)

这里还有一个ToDoList的示例：列表渲染 | Vue.js (vuejs.org)