vue学习-表单输入绑定

1. 文本

v-model进行双向绑定。

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

• text 和 textarea 元素使用 value property 和 input 事件；
• checkbox 和 radio 使用 checked property 和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件。

  <div>
    <input type="text" v-model="msg" />
  </div>

  <div>
    <textarea v-model="msg"></textarea>
  </div>

  data() {
    return {
      msg: "",
    };
  },

---

2. 复选框 (Checkbox)

单个复选框，选中则checked为true，没选中为false

for="checkbox"作用是让点击label相当于点击id="checkbox"

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

  data() {
    return {
      checked: true,
    };
  },

多个复选框，绑定同一个数组。选中则该项的value="Jack", Jack推入数组

<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>

  data() {
    return {
      checkedNames: [],
    };
  },

---

3. 单选框 (Radio)

选中哪个，绑定的值为该项value的值

选中男，sex的值为male

选中女，sex的值为female

<input type="radio" id="male" value="male" v-model="sex" />
<label for="male">男</label>
<input type="radio" id="female" value="female" v-model="sex" />
<label for="female">女</label>
<span>sex: {{ sex }}</span>

data() {
  return {
    sex: "male",
  };
},

---

4.选择框 (Select)

单选，选中某项，绑定的值(selected)为该项的value值，如果该项没有value，则为text值

选中第二个‘啊’，因为value="A"，selected为A

选中第三个‘B’，因为没有value，selected为B

如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像下面这样提供一个值为空的禁用选项

<select v-model="selected">
  <option disabled value="">Please select one</option>
  <option value="A">啊</option>
  <option>B</option>
  <option>C</option>
</select>
<span>Selected: {{ selected }}</span>

data() {
  return {
    selected: "",
  };
},

 

多选，绑定数组。和单选一样，选中某项，绑定的值(selecteds数组)增加该项的value值，如果该项没有value，则为text值。

 

选中BC，selecteds为[ "B", "C" ]

按住 Ctrl (windows) / Command (Mac) 按钮来选择多个选项

<select v-model="selecteds" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>selecteds: {{ selecteds }}</span>

data() {
  return {
    selecteds: [],
  };
},

v-for生成选项

<select v-model="selecteds" multiple>
  <option value="a">A</option>
  <option>B</option>
  <option>C</option>
</select>

data() {
  return {
    selected: "A",
    options: [
      { text: "One", value: "A" },
      { text: "Two", value: "B" },
      { text: "Three", value: "C" },
    ],
  };
},

---

5. 修饰符

.lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组织文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步：

<input type="text" v-model.lazy="msg" />

 

.number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。

<input v-model.number="age" type="number" />

.trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符： 

<input v-model.trim="msg" />