vue 表单绑定

1. 单行文本框绑定 

<p>Message is: {{ message }}</p>
<input v-model="message" placeholder="edit me" />

2.多行文本框绑定

<textarea v-model="message" placeholder="add multiple lines"></textarea>

注意在 <textarea> 中是不支持插值表达式的。用 v-model 来替代
<!-- 错误 -->
<textarea>{{ text }}</textarea>
<!-- 正确 -->
<textarea v-model="text"></textarea>

3. 单一复选框，自动绑定布尔类型值。

label标签通过for=”checkbox”与input标签里的id=”checkbox”的文本输入框关联起来。当用户点击label标签时，文本输入框会自动获得焦点，从而方便用户进行输入操作。

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

4.多选，可以绑定到数组      

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

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

  5.单选按钮

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

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

6. 下拉选择框，可以多选。设置默认选项。 

<span> Selected: {{ selected }}</span>
<select v-model="selected" >
// <select v-model="selected" multiple> 多选
  <option   value="" >Please selec1t one1</option>
  <option v-for="(item,index) in newList" :key="index">
    {{ item.title }}
  </option>
</select>

7. 修饰符 

v-model 会在每次input事件后更新数据，加 lazy 修饰符来改为在每次 change 事件后更新数据：

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

.number 输入自动转换为数字   .trim 去除输入的两端的空格