vue之v-model表单绑定
1.背景
2.简单使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!--<script src="./js/vue.js"></script>--> </head> <body> <div id="app"> <h3>{{title}}</h3> 请输入你的姓名:<input v-model="name"> <br> 你输入的名称为:{{name}} </div> <script> const app = new Vue({ el: '#app', data: { title: 'v-model之双向绑定', name: 'ldp', number: 60 } }); </script> </body> </html>
3.双向绑定原理
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!--<script src="./js/vue.js"></script>--> </head> <body> <div id="app"> <h3>{{title}}</h3> <pre> 原理: 原理很简单, 第一步:使用v-bind给value元素赋值, 第二步:使用v-on:input监听input输入的变化 </pre> <h4>v-model实现双向绑定</h4> 请输入你的姓名:<input v-model="name"> <br> 你输入的名称为:{{name}} <hr> <h4>自己写代码实现双向绑定(v-bind与v-on配合使用就可以了)</h4> 请输入你的姓名:<input v-bind:value="name2" v-on:input="name2=$event.target.value"> <br> 你输入的名称为:{{name2}} </div> <script> const app = new Vue({ el: '#app', data: { title: 'v-model之原理', name: 'ldp', name2: 'ldp2', number: 60 } }); </script> </body> </html>
4.单选框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!--<script src="./js/vue.js"></script>--> </head> <body> <div id="app"> <h3>{{title}}</h3> 请输入你的性别: <label for="male"> <input id="male" type="radio" v-model="gender" value="1"> 男 </label> <label for="female"> <input id="female" type="radio" v-model="gender" value="2"> 女 </label> <label for="other"> <input id="other" type="radio" v-model="gender" value="3"> 其他 </label> <br> 你输入的性别为:{{gender}} </div> <script> const app = new Vue({ el: '#app', data: { title: 'v-model之radio单选框实现', name: 'ldp', gender: '', number: 60 } }); </script> </body> </html>
5.复选框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!--<script src="./js/vue.js"></script>--> </head> <body> <div id="app"> <h3>{{title}}</h3> 请选择你喜欢的开发语言: <label for="java"> <input id="java" type="checkbox" v-model="language" value="1"> java </label> <label for="c"> <input id="c" type="checkbox" v-model="language" value="2"> c </label> <label for="c++"> <input id="c++" type="checkbox" v-model="language" value="3"> c++ </label> <label for="c#"> <input id="c#" type="checkbox" v-model="language" value="4"> c# </label> <br> 你输入的性别为:{{language}} <hr> <label for="check"> <input id="check" type="checkbox" v-model="checked"> 请勾选协议 </label> <br> 你是否勾选了勒:{{checked}} </div> <script> const app = new Vue({ el: '#app', data: { title: 'v-model之checkbox复选框实现', name: 'ldp', language: [], checked: false, number: 60 } }); </script> </body> </html>
6.下拉框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!--<script src="./js/vue.js"></script>--> </head> <body> <div id="app"> <h3>{{title}}</h3> 请选择你出生的月份: <select v-model="month"> <option value="1">1月</option> <option value="2">2月</option> <option value="3">3月</option> <option value="4">4月</option> <option value="5">5月</option> <option value="6">6月</option> <option value="7">7月</option> <option value="8">8月</option> <option value="9">9月</option> <option value="10">10月</option> <option value="11">11月</option> <option value="12">12月</option> </select> <br> 你选择的月份是:{{month}} <hr> 请选择你去过的城市: <select v-model="city" multiple> <option value="1">成都</option> <option value="2">北京</option> <option value="3">上海</option> <option value="4">广州</option> </select> <br> 你选择的月份是:{{city}} </div> <script> const app = new Vue({ el: '#app', data: { title: 'v-model之select下拉框选择', month: '', city: [], name: 'ldp', language: [], checked: false, number: 60 } }); </script> </body> </html>
7.修饰符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!--<script src="./js/vue.js"></script>--> </head> <body> <div id="app"> <h3>{{title}}</h3> 请输入你的名字: <input v-model.lazy="name"> <br> v-model.lazy失去焦点后在显示:{{name}} <hr> 请输入你的年龄: <input type="number" v-model.number="age"> <br> v-model.number只能输入数字:{{age}} <hr> 请输入你的家庭地址: <input v-model.trim="address"> <br> v-model.trim会去掉首尾空格:{{address}} </div> <script> const app = new Vue({ el: '#app', data: { title: 'v-model之select下拉框选择', name: '', age: null, address: '' } }); </script> </body> </html>
完美!
