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="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>
vue2.0 之表单控件绑定的更多相关文章
- Vue表单控件绑定
前面的话 本文将详细介绍Vue表单控件绑定 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.v-model本质上不过是语法糖,它负 ...
- vue.js基础知识篇(3):计算属性、表单控件绑定
第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html><html lang="en" ...
- 表单控件绑定v-model
<!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...
- Vue#表单控件绑定
使用v-model 在表单控件上实现数据双向绑定. 单选:https://jsfiddle.net/miloer/bs49p0fx/ <input type="checkbox&quo ...
- Vue.js学习 Item9 – 表单控件绑定
基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.根据控件类型它自动选取正确的方法更新元素.尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些 ...
- vue表单控件绑定(表单数据的自动收集)
v-model指令 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇 但 v-model 本质上不过是语法糖,它负责监听用户的 ...
- vue--v-model表单控件绑定
原文链接:https://www.cnblogs.com/dyfbk/p/6868350.html v-model 指令在表单控件元素上创建双向数据绑定,下面一一进行示例解释. 1.v-model 双 ...
- vue v-model 表单控件绑定
v-model 指令在表单控件元素上创建双向数据绑定,下面一一进行示例解释. 1.v-model 双向绑定文本 <!DOCTYPE html> <html> <head ...
- Vue.js-----轻量高效的MVVM框架(七、表单控件绑定)
话不多说,先上完整代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
随机推荐
- Minimum Integer CodeForces - 1101A (思维+公式)
You are given qq queries in the following form: Given three integers lili, riri and didi, find minim ...
- org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'stu' defined in class path resource [applicationContext.xml]: Instantiation of bean failed; nested exception is
org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'stu' defined ...
- Hadoop and net core a match made in docker
https://blog.sixeyed.com/hadoop-and-net-core-a-match-made-in-docker/
- Array与Object
typeof([ ])的返回值是object,因为数组叫做数组对象. Array有length属性,而Object没有length属性,所以可以根据length属性来判断数据属于数组还是对象. Arr ...
- ArrayMap代码分析
Java提供了HashMap,但是HashMap对于手机端而言,对内存的占用太大,所以Android提供了SparseArray和ArrayMap.二者都是基于二分查找,所以数据量大的时候,最坏效率会 ...
- p3c安装使用 编码规范扫描 阿里巴巴出品,挺好用的
https://github.com/alibaba/p3c/wiki/IDEA%E6%8F%92%E4%BB%B6%E4%BD%BF%E7%94%A8%E6%96%87%E6%A1%A3
- MySQL分区管理
以下是我看MySQL官方文档的时候整理的笔记,仅作参考保留. RANGE,LIST分区管理 1:为未分区表创建分区 ; 2:删除某个分区的数据 ALTER TABLE tr DROP PARTITIO ...
- s-axis-config-tdata
- Nginx ACCESS阶段 如何限制IP访问
192.168.1.0/24(最大32位的子网掩码) 每个ip是8位 那么 24/8 = 3 也就是前三个二进制 是 11111111 11111111 11111111 是指子网掩码的位数.写的是多 ...
- BZOJ3505 CQOI2014数三角形(组合数学)
显然可以用总方案数减掉三点共线的情况.对于三点共线,一个暴力的做法是枚举起点终点,其间整点数量即为横纵坐标差的gcd-1.这样显然会T,注意到起点终点所形成的线段在哪个位置是没有区别的,于是枚举线段算 ...