-
代码演示
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-model</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript" src="../asserts/js/vue.js"></script> </head> <body> <h1>v-model</h1> <hr> <div id="app"> <p>原始文本:{{message}}</p> <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 cols="30" rows="10" v-model="message"></textarea> <h3>多选按钮绑定一个值</h3> <input type="checkbox" id="isTrue" v-model="isTrue"> <label for="isTrue">{{isTrue}}</label> <hr> <h4>多选框绑定数组</h4> <p> <input type="checkbox" id="Tom" value="Tom" v-model="web_names"> <label for="Tom">Tom</label> <input type="checkbox" id="Jerry" value="Jerry" v-model="web_names"> <label for="Tom">Jerry</label> <input type="checkbox" id="WENROU" value="WENROU" v-model="web_names"> <label for="Tom">WENROU</label> <p>{{web_names}}</p> </p> <h3>单选框的绑定</h3> <input type="radio" id="one" value="男" v-model="sex"> <label for="one">男</label> <input type="radio" id="two" value="女" v-model="sex"> <label for="one">女</label> <p>{{sex}}</p> </div> <script type="text/javascript"> var app = new Vue({ el:'#app', data:{ message:'hello Vue!', isTrue:true, web_names:[], sex:'男' } }); </script> </body> </html> -
v-model ：
数据的双向绑定，多用于数据表单
学习链接： 技术胖
网友评论