vue表单控件绑定（表单数据的自动收集）
v-model指令
你可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇
但 v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子
v-model 并不关心表单控件初始化所生成的值。因为它会选择 Vue 实例数据来作为具体的值
<template> <div id="app"> <input v-model="message" placeholder="edit me" /> <p>{{message}}</p> </div> </template> <script> export default { name: 'app', data () { return { message: '' } } } </script>
多行文本输入框
在文本区域插值( <textarea></textarea> ) 并不会生效，应用 v-model 来代替
<template> <div id="app"> <textarea v-model="message" placeholder="edit me" /> <!--style="white-space: pre"可以解析换行--> <p style="white-space: pre">{{message}}</p> </div> </template> <script> export default { name: 'app', data () { return { message: '' } } } </script>
复选框
单个勾选框，逻辑值
<template> <div id="app"> <input type="checkbox" id="checkbox" v-model="checked" /> <label for="checkbox">{{checked}}</label> </div> </template> <script> export default { name: 'app', data () { return { checked: false } } } </script>
多个勾选框，绑定到同一个数组
<template> <div id="app"> <input type="checkbox" id="apple" value="apple" v-model="checkedName" /> <label for="apple">apple</label> <input type="checkbox" id="orange" value="orange" v-model="checkedName" /> <label for="orange">orange</label> <input type="checkbox" id="banana" value="banana" v-model="checkedName" /> <label for="banana">banana</label> <p>{{checkedName}}</p> </div> </template> <script> export default { name: 'app', data () { return { checkedName: [] } } } </script>
单选按钮
<template> <div id="app"> <input type="radio" id="apple" value="apple" v-model="checkedName" /> <label for="apple">apple</label> <input type="radio" id="orange" value="orange" v-model="checkedName" /> <label for="orange">orange</label> <input type="radio" id="banana" value="banana" v-model="checkedName" /> <label for="banana">banana</label> <p>{{checkedName}}</p> </div> </template> <script> export default { name: 'app', data () { return { checkedName: 'apple' } } } </script>
列表选择—单选列表/多选列表
<template> <div id="app"> <select v-model="selected"> <option>apple</option> <option>orange</option> <option>banana</option> </select> <p>{{selected}}</p> </div> </template> <script> export default { name: 'app', data () { return { selected: 'apple' } } } </script>
多选绑定到一个数组（需要按住Ctrl进行多选）
<template> <div id="app"> <select v-model="selected" multiple> <option>apple</option> <option>orange</option> <option>banana</option> </select> <p>{{selected}}</p> </div> </template> <script> export default { name: 'app', data () { return { selected: [] } } } </script>
动态选项，用 v-for 渲染
<template> <div id="app"> <select v-model="selected"> <option v-for="option in options" :value="option.value">{{option.name}}</option> </select> <p>{{selected}}</p> </div> </template> <script> export default { name: 'app', data () { return { selected: 'a', options: [ {name: 'apple', value: 'a'}, {name: 'orange', value: 'o'}, {name: 'banana', value: 'b'} ] } } } </script>
修饰符——lazy
在默认情况下， v-model 在 input 事件中同步输入框的值与数据 ，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步
在输入框失去焦点或者电脑窗口改变后或者按enter时，数据会同步更新
<template> <div id="app"> <input type="text" v-model.lazy="message" /> {{message}} </div> </template> <script> export default { name: 'app', data () { return { message: '' } } } </script>
修饰符——number
如果想自动将用户的输入值(输入框输入的值都是字符串类型)转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number给 v-model 来处理输入值
<template> <div id="app"> <input type="text" v-model.number="message" /> {{message}} </div> </template> <script> export default { name: 'app', data () { return { message: '' } } } </script>
修饰符—— trim
如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入
<template> <div id="app"> <input type="text" v-model.trim="message" /> {{message}} </div> </template> <script> export default { name: 'app', data () { return { message: '' } } } </script>
修饰符—— prevent
阻止表单提交的默认事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>08_表单输入绑定</title> </head> <body> <div id="demo"> <form action="/xxx" @submit.prevent="handleSubmit"> <span>用户名: </span> <input type="text" v-model="username"><br> <span>密码: </span> <input type="password" v-model="pwd"><br> <span>性别: </span> <input type="radio" id="female" value="女" v-model="sex"> <label for="female">女</label> <input type="radio" id="male" value="男" v-model="sex"> <label for="male">男</label><br> <span>爱好: </span> <input type="checkbox" id="basket" value="basket" v-model="likes"> <label for="basket">篮球</label> <input type="checkbox" id="foot" value="foot" v-model="likes"> <label for="foot">足球</label> <input type="checkbox" id="pingpang" value="pingpang" v-model="likes"> <label for="pingpang">乒乓</label><br> <span>城市: </span> <select v-model="cityId"> <option value="">未选择</option> <option :value="city.id" v-for="(city, index) in allCitys" :key="city.id">{{city.name}}</option> </select><br> <span>介绍: </span> <textarea rows="10" v-model="info"></textarea><br><br> <input type="submit" value="注册"> </form> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> new Vue({ el: '#demo', data: { username: '', pwd: '', sex: '男', likes: ['foot'], allCitys: [{id: 1, name: 'BJ'}, {id: 2, name: 'SS'}, {id: 3, name: 'SZ'}], cityId: '2', info: '' }, methods: { handleSubmit () { console.log(this.username, this.pwd, this.sex, this.likes, this.cityId, this.info) alert('提交注册的ajax请求') } } }) </script> </body> </html>
