表单输入绑定

（1）文本

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

（2）多行文本

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

（3）复选框

单个复选框，绑定到布尔值：

<template>
  <div>
    <input type="checkbox" v-model="checked"> //只会出现前面的那个方框
    <label for="checkbox">{{ checked }}</label>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      checked: ''
    }
  }
}

多个复选框，绑定到同一个数组：

 1 <template>
 2   <div>
 3     <div id='example-3'>
 4       <input type="checkbox" value="Jack" v-model="checkedNames"> //绑定到同1个数组
 5       <label for="jack">Jack</label> //与上述value为jack进行绑定，然后点击label中的Jack也能操作前面的方框
 6       <input type="checkbox" value="John" v-model="checkedNames"> //绑定到同1个数组
 7       <label for="john">John</label>
 8       <input type="checkbox" value="Mike" v-model="checkedNames"> //绑定到同1个数组
 9       <label for="mike">Mike</label>
10       <br>
11       <span>Checked names: {{ checkedNames }}</span> //假如全选的话，会输出[ "Jack", "John", "Mike" ]
12     </div>
13   </div>
14 </template>
15 
16 <script>
17 export default {
18   name: 'Home',
19   data () {
20     return {
21       checkedNames: []
22     }
23   }
24 }
25 </script>

（4）单选按钮

<template>
  <div>
    <div id="example-4">
      <input type="radio" value="One" v-model="picked"> //绑定同1个picked
      <label for="one">One</label>
      <br>
      <input type="radio" value="Two" v-model="picked"> //绑定同1个picked
      <label for="two">Two</label>
      <br>
      <span>Picked: {{ picked }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      picked: ''
    }
  }
}
</script>

（5）选择框

单选时：

 1 <template>
 2   <div>
 3     <div id="example-5">
 4       <select v-model="selected"> //1个顶层selectd
 5         <option disabled value="">请选择</option>
 6         <option>A</option>
 7         <option>B</option>
 8         <option>C</option>
 9       </select>
10       <span>Selected: {{ selected }}</span>
11     </div>
12   </div>
13 </template>
14 
15 <script>
16 export default {
17   name: 'Home',
18   data () {
19     return {
20       selected: ''
21     }
22   }
23 }
24 </script>

多选时：

 1 <div id="example-6">
 2   <select v-model="selected" multiple>
 3     <option>A</option>
 4     <option>B</option>
 5     <option>C</option>
 6   </select>
 7   <br>
 8   <span>Selected: {{ selected }}</span>
 9 </div>
10 new Vue({
11   el: '#example-6',
12   data: {
13     selected: []
14   }
15 })

可能不理解多选吧，没有看到多选的效果；

posted @ 2018-06-27 14:26  追风筝的蜗牛  阅读(125)  评论(0)    收藏  举报