首页 > 代码库 > vue2.0 之表单控件绑定
vue2.0 之表单控件绑定
表单控件绑定v-model
1、文本
<template>
<div>
<input type="text" name="" v-model="myVal"><br/>
{{ myVal }}<br/>
<input type="text" name="" v-model.lazy="myVal1"><br/>
{{ myVal1 }}<br/>
<input type="text" name="" v-model.number="myVal2"><br/>
{{ typeof myVal2 }}<br/>
<input type="text" name="" v-model.trim="myVal3"><br/>
{{ myVal3 }}<br/>
</div>
</template>
<script>
export default {
data () {
return {
myVal: ‘‘,
myVal1: ‘‘,
myVal2: ‘‘,
myVal3: ‘‘
}
}
}
</script>
<style>
html {
height: 100%;
}
</style>
v-model指令在表单控件元素上创建双向数据绑定。
- lazy：延迟显示
- number：转化为数字类型
- trim：去除左右空字符
2、复选框、单选按钮
<template>
<div>
{{ myVal }} <br/>
<input type="checkbox" name="" value="http://www.mamicode.com/apple" v-model="myVal"/>
<label>apple</label>
<input type="checkbox" name="" value="http://www.mamicode.com/banana" v-model="myVal"/>
<label>banana</label>
<input type="checkbox" name="" value="http://www.mamicode.com/orange" v-model="myVal"/>
<label>orange</label>
<br/> {{ myVal1 }} <br/>
<input type="radio" name="" value="http://www.mamicode.com/apple" v-model="myVal1"/>
<label>apple</label>
<input type="radio" name="" value="http://www.mamicode.com/banana" v-model="myVal1"/>
<label>banana</label>
<input type="radio" name="" value="http://www.mamicode.com/orange" v-model="myVal1"/>
<label>orange</label>
</div>
</template>
<script>
export default {
data () {
return {
myVal: [],
myVal1: ‘‘
}
}
}
</script>
<style>
html {
height: 100%;
}
</style>
3、选择列表
案例一：
<template>
<div>
{{ myVal }} <br/>
<select v-model="myVal">
<option value="http://www.mamicode.com/0">apple</option>
<option value="http://www.mamicode.com/1">banana</option>
<option value="http://www.mamicode.com/2">orange</option>
</select>
</div>
</template>
<script>
export default {
data () {
return {
myVal: ‘‘
}
}
}
</script>
<style>
html {
height: 100%;
}
</style>
案例二：
<template>
<div>
{{ myVal }} <br/>
<select v-model="myVal">
<option v-for="item in options" :value="http://www.mamicode.com/item.val">{{ item.name }}</option>
</select>
</div>
</template>
<script>
export default {
data () {
return {
myVal: ‘‘,
options: [
{
name: ‘apple‘,
val: 0
},
{
name: ‘banana‘,
val: 1
},
{
name: ‘orange‘,
val: 2
}
]
}
}
}
</script>
<style>
html {
height: 100%;
}
</style>
vue2.0 之表单控件绑定
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。