v-model指令实现表单双向绑定数据。触发文本框的input事件。
一、文本框
<div id="J_app"> <p>{{ info }}</p> <input v-model.trim="info"> </div> var vapp = new Vue({ el: '#J_app', data: { info: 'Hello Vue!' } })
二、单选框
<div id="J_app"> <input type="radio" id="male" value="male" v-model="ro"> <label for="male">male</label> <br> <input type="radio" id="female" value="female" v-model="ro"> <label for="female">female</label> <br> <span>性别:{{ ro }}</span> </div> var vapp = new Vue({ el: '#J_app', data: { ro: '' } })
三、复选框
1、一个勾选框
<div id="J_app"> <input type="checkbox" id="J_ckb" v-model="ckb"> <label for="checkbox">{{ ckb }}</label> </div> var vapp = new Vue({ el: '#J_app', data: { ckb: '' } })
2、多个勾选框
<div id="J_app"> <input type="checkbox" id="html" value="html" v-model="ckbs"> <label for="html">html</label> <input type="checkbox" id="css" value="css" v-model="ckbs"> <label for="css">css</label> <input type="checkbox" id="js" value="js" v-model="ckbs"> <label for="js">js</label> <br> <span>你学过哪些:{{ ckbs }}</span> </div> var vapp = new Vue({ el: '#J_app', data: { ckbs: [] } })
3、多个动态勾选框
如果是动态复选框,怎么写?如果要实现全选,反选,怎么写?看这里。
四、选择列表
1、单选
<div id="J_app"> <select v-model="selected"> <option disabled value="">请选择</option> <option>vuejs</option> <option>reactjs</option> <option>angularjs</option> </select> <span>我选择: {{ selected }}</span> </div> var vapp = new Vue({ el: '#J_app', data: { selected: '' } })
2、多选
<div id="J_app"> <select v-model="selected" multiple style=" 50px;"> <option disabled value="">请选择</option> <option>vuejs</option> <option>reactjs</option> <option>angularjs</option> </select> <span>我选择: {{ selected }}</span> </div> var vapp = new Vue({ el: '#J_app', data: { selected: [] } })
3、动态选
<div id="J_app"> <select v-model="selected"> <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option> </select> <span>我选择: {{ selected }}</span> </div> var vapp = new Vue({ el: '#J_app', data: { selected: '0', options: [ { text: 'vuejs', value: '0' }, { text: 'reactjs', value: '1' }, { text: 'angularjs', value: '2' } ] } })