Vue.js入门之第六篇（表单）

目录

v-model

  在表单控件元素上创建双向数据绑定
  
  会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。
  在内部使用不同的属性为不同的输入元素并抛出不同的事件：
      text 和 textarea 元素使用 value 属性和 input 事件；
      checkbox 和 radio 使用 checked 属性和 change 事件；
      select 字段将 value 作为 prop 并将 change 作为事件。

可选修饰符
    1、.lazy
    input改变时不影响属性值，change事件后更新
    <input v-model.lazy="msg" >
    2、.number
    自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值）
    <input v-model.number="age" type="number">
    3、.trim
    自动过滤用户输入的首尾空格
    <input v-model.trim="msg">

1. 输入框

<div id="app">
  <input v-model="message" placeholder="编辑我……">
  <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
  <p>消息是: {{ message }}</p>
  <p style="white-space: pre">{{ message2 }}</p>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello',
    message2: 'World'
  }
})
</script>

2. 复选框

<div id="app">
  <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
  <label for="runoob">Runoob</label>
  <input type="checkbox" id="google" value="Google" v-model="checkedNames">
  <label for="google">Google</label>
  <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
  <label for="taobao">taobao</label>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    checked : false,
    checkedNames: []
  }
})
</script>

3. 单选框

<div id="app">
  <input type="radio" id="runoob" value="Runoob" v-model="picked">
  <label for="runoob">Runoob</label>
  <br>
  <input type="radio" id="google" value="Google" v-model="picked">
  <label for="google">Google</label>
  <br>
  <span>选中值为: {{ picked }}</span>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    picked : 'Runoob'
  }
})
</script>

4. select 下拉框

<div id="app">
  <select v-model="selected" name="fruit">
    <option disabled value="">选择一个网站</option>
    <option value="www.runoob.com">Runoob</option>
    <option value="www.google.com">Google</option>
  </select>
 
  <div id="output">
      选择的网站是: {{selected}}
  </div>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    selected: '' 
  }
})
</script>