Vue入门教程09-表单处理

一、input 和 textarea 输入框

在之前的学习案例中，我们经常使用 v-model=“message” 的方式实现双向数据绑定，而且v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值，总是以 Vue 实例的数据为准。
以下是v-model实现input 和 textarea 输入框双向数据绑定：

<input v-model="msg" placeholder="请输入内容">
<textarea v-model="msg" placeholder="请输入内容"></textarea>

二、复选框

复选框checkbox的使用：

<template>
  <div id="hello">
    <p>单个复选框使用：v-model直接绑定checked关键词(boolean类型)</p>
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{ checked }}</label>
    <br/>
    <p>多个复选框：</p>
    <input type="checkbox" id="java" value="Java编程思想" v-model="books">
    <label for="java">Java编程思想</label>
    <input type="checkbox" id="vuejs" value="Vue入门教程" v-model="books">
    <label for="vuejs">Vue入门教程</label>
    <input type="checkbox" id="yuwen" value="语文书" v-model="books">
    <label for="yuwen">语文书</label>
    <br/><span>已选择: {{ books }}</span>
  </div>
</template>
<script>
  export default {
    name: 'hello',
    data( ){
      return {
        checked:false,
        books:[]
      }
    }
  }
</script>

效果如下：

三、单选框

单选框radio使用格式L

    <input type="radio" id="Java" value="Java" v-model="picked">
    <label for="Java">Java</label>
    <br>
    <input type="radio" id="Python" value="Python" v-model="picked">
    <label for="Python">Python</label>
    <br>
    <span>选中值为: {{ picked }}</span>

效果如下：

四、select下拉框

select下拉框绑定一个selected变量值：

  <div id="hello">
    <select v-model="selected" name="book">
      <option value="">选择一本</option>
      <option value="Java编程思想">Java编程思想</option>
      <option value="Vue入门教程">Vue入门教程</option>
      <option value="语文书">语文书</option>
    </select>
    <div>
      选择的书本是: {{selected}}
    </div>
  </div>

五、修饰符

1、.lazy:

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

//在“change”时而不是在“input”时更新 
<input v-model.lazy="msg" >

2、.number:

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

3、.trim：

过滤用户输入的首尾空格：

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

END.