vue2.0 之表单控件绑定
2024-08-29 11:36:29
表单控件绑定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="apple" v-model="myVal"/>
<label>apple</label>
<input type="checkbox" name="" value="banana" v-model="myVal"/>
<label>banana</label>
<input type="checkbox" name="" value="orange" v-model="myVal"/>
<label>orange</label>
<br/> {{ myVal1 }} <br/>
<input type="radio" name="" value="apple" v-model="myVal1"/>
<label>apple</label>
<input type="radio" name="" value="banana" v-model="myVal1"/>
<label>banana</label>
<input type="radio" name="" value="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="0">apple</option>
<option value="1">banana</option>
<option value="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="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>
最新文章
- 【原创】Aspose.Words组件介绍及使用—基本介绍与DOM概述
- 然并卵，腾讯QQ认证空间又再次关闭申请
- QT QML目录导航列表视图
- HashBytes(Transact-SQL)
- 前端那点事儿——Tocify自动生成文档目录
- 实战Ubuntu Server上配置LXDE+VNC环境
- Js脚本选取iframe中的元素
- Python 脚本之获取CPU信息
- Android——学习笔记
- php nl2br() 函数
- 用java读取properties文件--转
- go和swift
- POJ 1470 Closest Common Ancestors(LCA&RMQ)
- 100个linux站点
- 为什么Redis比Memcached易
- 4GB内存原32位系统(x86)取舍问题，显卡共享内存Win8.1完全不用担心
- 第二次冲刺spring会议（第四次会议）
- Carries SCU - 4437
- 服务器部署Apache+PHP+MYSQL+Laravel
- arrayList和vector的区别--2019-4-16