v-model 实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>v-model 实例</title> <script type="text/javascript" src="../assets/js/vue.js"></script> </head> <body> <h1>v-model 实例</h1> <hr> <div id="app"> <p>原始文本信息:{{message}}</p><br/> <h3>文本框</h3> <p>v-model:<input type="text" v-model="message"></p> <p>v-model.lazy<input type="text" v-model.lazy="message"></p> <p>v-model.number<input type="text" v-model.number="message"></p> <p>v-model.trim<input type="text" v-model.trim="message"></p> <hr> <h3>文本域</h3> <textarea name="" id="" cols="30" rows="10" v-model="message"></textarea> <hr> <h3>多选框绑定一个值</h3> <input type="checkbox" id="isTrue" v-model="isTrue"> <lable for="isTrue">{{isTrue}}</lable> <hr> <h3>多选框绑定数组</h3> <p> <input type="checkbox" id="xurui" value="xurui" v-model="web_names"> <lable for="isTrue">xurui</lable> <input type="checkbox" id="xu" value="xu" v-model="web_names"> <lable for="isTrue">xu</lable> <input type="checkbox" id="rui" value="rui" v-model="web_names"> <lable for="isTrue">rui</lable> </p> <p>{{web_names}}</p> <hr> <h3>单选框绑定</h3> <p> <input type="radio" id="one" value="男" v-model="sex"> <lable for="one">男</lable> <input type="radio" id="two" value="女" v-model="sex"> <lable for="two">女</lable> <p>你选择的性别是:{{sex}}</p> </p> </div> <script type="text/javascript"> var app = new Vue({ el:'#app', data:{ message:'hello world', isTrue:true, web_names:[], sex:'男' } }) </script> </body> </html>
一.修饰符
1 .lazy:取代 imput 监听 change 事件。做优化时用 懒加载
2 .number:输入字符串转为数字。先输入字符串再输入数字,默认为输入字符串; 先输入数字再输入字符串,后面的字符串不显示
3 .trim:输入去掉首尾空格。