Vue表单控件绑定
应用v-model绑定文本框、应用v-model绑定复选框、应用v-model绑定下拉菜单、应用v-model绑定到动态属性
·
目录
在web应用中,通过表单可以实现输入文字、选择选项和提交数据等功能。在Vue.js中,通过v-model指令可以对表单元素进行数据绑定,在修改表单元素值的同时,Vue实例中对应的属性值也会随之更新
1、应用v-model绑定文本框:
<div id="element">
<input v-model="message1" placeholder="单行文本框">
<p>单行文本框当前输入:{{message1}}</p>
<br>
<textarea v-model="message2" placeholder="多行文本框"></textarea>
<p>多行文本框当前输入:{{message2}}</p>
<br>
<textarea v-model="message3" placeholder="值绑定文本框"></textarea>
</div>
<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">
var demo = new Vue({
el: '#element',
data: {
message1:'',
message2:'',
message3:'ikun'
}
})
</script>
2、应用v-model绑定复选框:
<div id="element">
<p>绑定当个复选框</p>
<input v-model="checkbox1" type="checkbox">
<label for="checkbox1">checkbox1:{{checkbox1}}</label>
<br>
<p>绑定多个复选框</p>
<input v-model="checkbox2" type="checkbox" value="基">
<label>基</label>
<input v-model="checkbox2" type="checkbox" value="你">
<label>你</label>
<input v-model="checkbox2" type="checkbox" value="太">
<label>太</label>
<input v-model="checkbox2" type="checkbox" value="美">
<label>美</label>
<p>{{checkbox2}}</p>
<p>值绑定复选框</p>
<input v-model="checkbox4" type="checkbox" :value="checkbox3[0]">
<label>{{checkbox3[0]}}</label>
<input v-model="checkbox4" type="checkbox" :value="checkbox3[1]">
<label>{{checkbox3[1]}}</label>
<input v-model="checkbox4" type="checkbox" :value="checkbox3[2]">
<label>{{checkbox3[2]}}</label>
<p>{{checkbox4}}</p>
</div>
<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">
var demo = new Vue({
el: '#element',
data: {
checkbox1: '',
checkbox2: [],
checkbox3: ['你','干','嘛~'],
checkbox4: []
}
})
</script>
3、应用v-model绑定下拉菜单:
<div id="element">
<p>绑定单选下拉菜单</p>
<select v-model="type1">
<option value="">请选择</option>
<option>哎哟,你干嘛</option>
<option>香翅捞饭</option>
<option>荔枝</option>
</select>
<p>已选择:{{type1}}</p>
<p>绑定多选下拉菜单</p>
<select v-model="type2" multiple="multiple" size="4">
<option>CTRL+单击,多选</option>
<option>卤出鸡脚</option>
<option>哎哟,你干嘛</option>
<option>香翅捞饭</option>
<option>荔枝</option>
</select>
<p>已选择:{{type2}}</p>
<p>值绑定下拉菜单</p>
<select v-model="type4" multiple="multiple" size="4">
<option>{{type3[0]}}</option>
<option>{{type3[1]}}</option>
<option>{{type3[2]}}</option>
<option>{{type3[3]}}</option>
<option>{{type3[4]}}</option>
</select>
<p>已选择:{{type4}}</p>
</div>
<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">
var demo = new Vue({
el: '#element',
data: {
type1: '',
type2: [],
type3: ['真','ikun','粉','纯必要','没路人'],
type4: ''
}
})
</script>
更多推荐
已为社区贡献3条内容
所有评论(0)