学习vue.js表单控件绑定操作
本文实例为大家分享了vue.js表单控件绑定的具体代码,供大家参考,具体内容如下
html:
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>表单控件绑定</title> </head> <body> <!--v-model在表单控件元素上实现数据的双向绑定--> <divid="app-1"> <inputtype="text"v-model="message"placeholder="请输入"> <p>{{message}}</p> </div> <!--单个勾选框--> <divid="app-2"> <inputtype="checkbox"id="checkbox"v-model="checked"> <labelfor="checkbox">{{checked}}</label> </div> <!--多个勾选框绑定到同一数组--> <divid="app-3"> <inputtype="checkbox"id="checkboxjack"v-model="checkedNames"value="Jack"> <labelfor="checkboxjack">Jack</label> <inputtype="checkbox"id="checkboxJohn"v-model="checkedNames"value="John"> <labelfor="checkboxJohn">John</label> <inputtype="checkbox"id="checkboxMike"v-model="checkedNames"value="Mike"> <labelfor="checkboxMike">Mike</label> <span>我是{{checkedNames}}</span> </div> <!--单选框--> <divid="app-4"> <inputtype="radio"id="man"value="man"v-model="sex"> <labelfor="man">man</label> <inputtype="radio"id="woman"value="woman"v-model="sex"> <labelfor="woman">woman</label> <span>选择的时是{{sex}}</span> </div> <!--单选列表--> <divid="app-5"> <selectv-model="selected"> <option>A</option> <option>B</option> <option>C</option> </select> <span>我是{{selected}}</span> </div> <!--多选列表绑定到数组--> <divid="app-6"> <selectv-model='selected'multiple> <option>A</option> <option>B</option> <option>C</option> </select> <span>我选择了{{selected}}</span> </div> <!--动态选项用v-for渲染通过v-bind绑定value--> <divid="app-7"> <selectv-model='selected'> <optionv-for="iteminitems"v-bind:value="item.value"> {{item.text}} </option> </select> <!--v-model后的selected必须出现在data中--> <span>选择的是{{selected}}</span> </div> <!--在默认情况下,v-model在input事件中同步输入框的值与数据,但你可以添加一个修饰符lazy,从而转变为在change事件中同步:--> <!--在"change"而不是"input"事件中更新--> <inputv-model.lazy="msg"> <!--如果想自动将用户的输入值转为Number类型(如果原值的转换结果为NaN则返回原值),可以添加一个修饰符number给v-model来处理输入值:--> <inputv-model.number="age"type="number"> <!--这通常很有用,因为在type="number"时HTML中输入的值也总是会返回字符串类型。.trim如果要自动过滤用户输入的首尾空格,可以添加.trim修饰符到v-model上过滤输入:--> <inputv-model.trim="msg"> <scriptsrc="js/vue.js"></script> <scriptsrc="js/vuetext.js"></script> </body> </html>
js:
varapp1=newVue({ el:'#app-1', data:{ message:'开始' } }); varapp2=newVue({ el:'#app-2', data:{ checked:false } }); varapp3=newVue({ el:'#app-3', data:{ checkedNames:[] } }); varapp4=newVue({ el:'#app-4', data:{ sex:'' } }); varapp5=newVue({ el:'#app-5', data:{ selected:'' } }); varapp6=newVue({ el:'#app-6', data:{ selected:[] } }); varapp7=newVue({ el:'#app-7', data:{ selected:'A', items:[ {text:'One',value:'A'}, {text:'Two',value:'B'}, {text:'Three',value:'C'} ] } });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。