vue2.0 之表单控件绑定
表单控件绑定v-model
1、文本
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | < 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、复选框、单选按钮
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | < 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、选择列表
案例一:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | < 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 > |
案例二:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | < 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 > |
· 聊一聊坑人的 C# MySql.Data SDK
· 使用 .NET Core 实现一个自定义日志记录器
· [杂谈]如何选择:Session 还是 JWT?
· 硬盘空间消失之谜:Linux 服务器存储排查与优化全过程
· JavaScript是按顺序执行的吗?聊聊JavaScript中的变量提升
· 好消息,在 Visual Studio 中可以免费使用 GitHub Copilot 了!
· 聊一聊坑人的 C# MySql.Data SDK
· 没事别想不开去创业!
· Winform 使用WebView2 开发现代应用
· Java 项目愚蠢的分层及解决办法