用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 javascript 在组件的 data选项中声明初始值。
VUE框架数据绑定模型(MVVM)
v-model: "xxx" 文本输入框
|
<!-- 文本输入框<input/> --> <!-- 格式v-model="变量" --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v0.文本输入框</div> <hr /> <div> <div> <input v-model="v0_message" style="font-size: 20px;"></input> <p>{{v0_message}}</p> </div> </div> </div> |
v-model: "xxx" 多行文本输入
|
<!-- 多行文本输入框<textarea/> --> <!-- 格式v-model="变量" --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v1.多行文本</div> <hr /> <div> <div> <textarea v-model="v0_message" placeholder="place holder text" style="font-size: 20px;"></textarea> <p>{{v0_message}}</p> </div> </div> </div> |
v-model: "xxx" 复选框
|
<!-- 复选框<input type="checkbox"/> --> <!-- 格式v-model="变量" --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v2.复选框</div> <hr /> <div> <div> <input type="checkbox" v-model="v1_bool" style="font-size: 20px;"></input> <p>{{v1_bool}}</p> </div> </div> </div> |
v-model: "xxx" 多个复选框
|
<!-- 多个复选框<input type="checkbox"/> --> <!-- 格式v-model="变量" --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v3.多个复选框</div> <hr /> <div> <div> <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> <br> <span>Checked names: {{ checkedNames }}</span> </div> </div> </div> |
v-model: "xxx" 单选按钮
|
<!-- 单选按钮<input type="radio"/> --> <!-- 格式v-model="变量" --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v4.单选按钮</div> <hr /> <div> <div> <input type="radio" id="one" value="One" v-model="picked"> <label for="one">One</label> <br> <input type="radio" id="two" value="Two" v-model="picked"> <label for="two">Two</label> <br> <span>Picked: {{ picked }}</span> </div> </div> </div> |
v-model: "xxx" 选择框
|
<!-- 选择框<select/> --> <!-- 格式v-model="变量" --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v5.选择框</div> <hr /> <div> <div> <select v-model="selected"> <option disabled value="">请选择</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> </div> </div> </div> |
其他用法
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：
|
<!-- 在“change”时而非“input”时更新 --> |
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
|
<input v-model.number="age" type="number"> |
这通常很有用，因为即使在 type="number" 时，html 输入元素的值也总会返回字符串。
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
|
<input v-model.trim="msg"> |
<!DOCTYPE html> <html style="height: 100%;"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../lib/vue.v2.5.12.js"></script> <title>v-model</title> </head> <body style="height: 100%;"> <style> .style0 { font-size: 25px; color: green; } .style1 { background: gold; } </style> <!-- VUE指令v-model数据绑定指令 REF: http://www.runoob.com/vue2/vue-forms.html https://cn.vuejs.org/v2/guide/forms.html --> <div id="appVue"> <!-- 选择框<select/> --> <!-- 格式v-model="变量" --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v5.选择框</div> <hr /> <div> <div> <select v-model="selected"> <option disabled value="">请选择</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> </div> </div> </div> <!-- 单选按钮<input type="radio"/> --> <!-- 格式v-model="变量" --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v4.单选按钮</div> <hr /> <div> <div> <input type="radio" id="one" value="One" v-model="picked"> <label for="one">One</label> <br> <input type="radio" id="two" value="Two" v-model="picked"> <label for="two">Two</label> <br> <span>Picked: {{ picked }}</span> </div> </div> </div> <!-- 多个复选框<input type="checkbox"/> --> <!-- 格式v-model="变量" --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v3.多个复选框</div> <hr /> <div> <div> <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> <br> <span>Checked names: {{ checkedNames }}</span> </div> </div> </div> <!-- 复选框<input type="checkbox"/> --> <!-- 格式v-model="变量" --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v2.复选框</div> <hr /> <div> <div> <input type="checkbox" v-model="v1_bool" style="font-size: 20px;"></input> <p>{{v1_bool}}</p> </div> </div> </div> <!-- 多行文本输入框<textarea/> --> <!-- 格式v-model="变量" --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v1.多行文本</div> <hr /> <div> <div> <textarea v-model="v0_message" placeholder="place holder text" style="font-size: 20px;"></textarea> <p>{{v0_message}}</p> </div> </div> </div> <!-- 文本输入框<input/> --> <!-- 格式v-model="变量" --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v0.文本输入框</div> <hr /> <div> <div> <input v-model="v0_message" style="font-size: 20px;"></input> <p>{{v0_message}}</p> </div> </div> </div> </div> <script> new Vue({ el: "#appVue", data: { selected: ‘‘, picked: ‘‘, checkedNames: [], v1_bool: false, v0_message: "还没输入" } } ) </script> </body> </html>
REF:
http://www.runoob.com/vue2/vue-forms.html
https://cn.vuejs.org/v2/guide/forms.html