v-model详细使用

1、v-model结合radio

<label for="male">//value的值通过v-model和sex绑定到了一起<input type="radio" id="male" value="男" v-model="sex">男
</label>
<label for="female"><input type="radio" id="female "value="女" v-model="sex">女
</label>data(){return{sex: "男"//默认选择男}
}

2、v-model结合checkbox

2.1 单选框的情况，此时v-model绑定的是Boolean值，选中绑定true，取消绑定false：

<input type="checkbox" v-model="isAgree" >同意协议
<h2>您的选择是：{{isAgree}} </h2>
<button :disabled="!isAgree"> 下一步 //选择了单选框后才让点data(){return{isAgree: false //默认未选上}
}

效果：

2.2多选框的情况，此时v-model是数组类型

<input type="checkbox" value="篮球" v-model="hobbies">
<input type="checkbox" value="足球" v-model="hobbies">
<input type="checkbox" value="乒乓球" v-model="hobbies">
<input type="checkbox" value="羽毛球" v-model="hobbies"><h2>您的爱好是：{{hobbies}}</h2>data(){return{hobbies: []}
}

效果：

2.3动态展示：

<label v-for="item in list" :for="item"><input type="checkbox" :value="item" :id="item " v-model="hobbies">{{item}}
</label><h2>您的爱好是：{{hobbies}}</h2>data(){return{list:['篮球','台球','羽毛球','足球'],hobbies: []}
}

3、v-model结合select

3.1单选

<select name="fruit" id="aaa" v-model="fruit"><option value="苹果">苹果</option><option value="香蕉">香蕉</option><option value="橘子">橘子</option></select>data(){return{fruie: '香蕉' //默认选择香蕉}
}

3.2多选

<select name="fruit" v-model="fruits" mltiple><option value="苹果">苹果</option><option value="香蕉">香蕉</option><option value="橘子">橘子</option></select>data(){return{fruits: [] }
}

4、v-model修饰符

4.1 v-mode.lazy ：默认情况下，v-model是实时和data的数据进行绑定的，lazy修饰符可以让数据在失去焦点或者回车时才更新绑定。

4.2 v-model.number：默认情况下，v-model会把输入框输入的无论时数字还是字母都当作字符串进行处理，number修饰符可以让输入框输入的内容自动转化成数值类型处理。

4.3 v-mode.trim：如果输入的内容收尾有很多空格，trim修饰符可以自动删除掉收尾的空格。

v-model详细使用相关推荐

什么是V Model(V模型)
v-model是一种软件生存期模型,由Paul Rook在1980年率先提出的,在1990年出现在英国国家计算中心的出版物中,旨在提高软件开发的效率和有效性,是我们熟知的瀑布模型的一种改进,瀑布模型( ...
005_wz_bbk_-v详细信息，-c生成中间文件，链接次序
Verbose(冗长的) Compilation The '-v' option can be used to display detailed information about the exact ...
ARM 之七主流编译器（armcc、iar、gcc for arm、LLVM(clang)）详细介绍
必备在讲解各编译器之前,必须先了解一下以下这些文件.这些文件在编译器目录下或者编译生成目标平台的可执行程序时经常见到.此外,还需要注意区分 Windows 平台和 Linux 平台的文件. . ...
【转】ARM 之七主流编译器（armcc、iar、gcc for arm、LLVM(clang)）详细介绍
转自:ARM 之七主流编译器(armcc.iar.gcc for arm.LLVM(clang))详细介绍_itexp-CSDN博客_armcc 必备在讲解各编译器之前,必须先了解一下以下文件 ...
Hive 3.x详细笔记
Hive 数据仓库概念数据仓库(Data Warehouse,简称数仓.DW),是一个用于存储,分许,报告的数据系统. 数据仓库的目的是构建面向分析的集成数据环境,分析结果为企业提供决策支持. 数 ...
ARM 之主流编译器（armcc、iar、gcc for arm）详细介绍
origin: https://blog.csdn.net/ZCShouCSDN/article/details/89553323 必备在讲解各编译器之前,必须先了解一下以下文件.这些文件在编译器目 ...
linux中的ln属性,linux 常用基础命令 ln 详细介绍
命令介绍: ln是linux中又一个非常重要命令,ln是为某一个文件在另外一个位置建立一个同步的链接.当我们需要在不同的目录,用到相同的文件时,我们不需要在每一个需要的目录下都放一个必须相同的文件,我 ...
rsyncd.conf 详细配置
-.全局参数在文件中[module]之前的所有参数都是全局参数,当然也可以在全局参数部分定义模块参数,这时候该参数的值就是所有模块的默认值. port 指定后台程序使用的端口号,默认为873. mo ...
tasklist命令参数应用详细图解
一操作实例不带参数: /svc参数: /SVC 显示每个进程中的服务信息,当/fo参数设置为table时有效. 列出调用了某个dll的进程: 列出系统中正在运行的非"SYSTEM&quo ...
git 提交命令_工作总结：Git的学习和使用，最详细的Git教程，从入门到精通
前言 Git简介实用主义深入探索总结参考资料前言 Git 是程序员学习和工作都离不开发工具,今天和大家分享 Git 常用命令总结. Git简介 Git 是一种分布式版本控制系统,它可以不受网 ...