vue表单操作
单行文本
<input type="text" v-model="uname"> <script src="../js/vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { uname: 'lisi' } }) </script>
多行文本
<textarea name="" id="" v-model="desc"></textarea> <script src="../js/vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { desc: '你好' } }) </script>
单选框
<input type="radio" value="1" v-model="gender">男 <input type="radio" value="2" v-model="gender">女 <script src="../js/vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { gender: 2 } }) </script>
复选框
<input type="checkbox" name="" id="" value="1" v-model="hobby"> 打豆豆 <input type="checkbox" name="" id="" value="2" v-model="hobby"> 唱歌 <input type="checkbox" name="" id="" value="3" v-model="hobby"> 睡觉 <script src="../js/vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { hobby: [2, 3] } }) </script>
下拉菜单
multiple: 可选多项
<select name="" id="" v-model="occupation" multiple="true"> <option value="0">请选择职业...</option> <option value="1">教授</option> <option value="2">教师</option> <option value="3">前端工程师</option> </select> <script src="../js/vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { occupation: [3, 2] } }) </script>