学习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'}
]
}
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。