Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题


Posted in Javascript onNovember 22, 2017

Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势。下面给大家介绍Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题。

摘要: 表单标签取值问题中,单选按钮、复选按钮和下拉列表都比较特殊。这里总结一下vue.js中关于单选按钮、复选按钮和下拉列表不同情况的取值特殊性问题。

    表单标签取值问题中,单选按钮、复选按钮和下拉列表都比较特殊。这里总结一下vue.js中关于单选按钮、复选按钮和下拉列表不同情况的取值特殊性问题。

一、单选按钮

    单选按钮:单选按钮用 v-model 绑定填值属性用来表示checked,用于判断是否选中。

    当单选按钮没写value值时,在 vue.js 中将值赋为null。

    在普通标签中,当没写name时,html 会默认将没写name 的单选按钮分为一组;

    在vue中,即使没写name,只要单选按钮v-model绑定了同一个变量(如:gender),这些按钮也会被分为一组。但是习惯上,我们还是也写上name。

    在data中定义的变量gender的值将影响到单选按钮的默认选项,如: 本例子中gender:"女",默认选择女。

    js部分代码:

window.onload = function (){
 new Vue({
 el:"#app",
 data:{
  gender:"女"
 }
 });
}

    html部分代码:

<body>
 <div id="app">
 <!-- 
  单选按钮:单选按钮用 v-model 绑定填值属性用来表示checked,用于判断是否选中。
  当单选按钮没写value值时,在vue中将值赋为null
  在普通标签中,当没写name时,html 会默认将没写name 的单选按钮分为一组;
  在vue中,即使没写name,只要单选按钮v-model绑定了同一个变量(如:gender),这些按钮也会被分为一组。

但是习惯上,我们还是也写上name      

        在data中定义的变量gender的值将影响到单选按钮的默认选项,如: 本例子中gender:"女",默认选择女。

-->
 <input type="radio" id="man" name="gender" value="男" v-model="gender">
 <label for="man">男</label>
 <input type="radio" id="woman" name="gender" value="女" v-model="gender">
 <label for="woman">女</label>
 </div>
</body>

二、复选按钮

    复选按钮:单选按钮用 v-model 绑定填值属性用来表示checked,用于判断是否选中。

    当多选按钮没写value值时,在 vue.js 中将值赋为null。

    vue.js对于复选按钮如何取值取决于 v-model 绑定的变量的类型。

1、基本类型

    初始化时,v-model 绑定的是任意的基本类型(Number、String、Boolean、Null、Undefined),取值时会默认转为Boolean类型,true时表示选中,false表示未选中。

js段代码:

window.onload = function (){
 new Vue({
 el:"#app",
 data:{
  hobbies01:"",
  hobbies02:"...",
  hobbies03:false
 }
 });
}

html段代码:

<body>
 <div id="app">
 <!-- v-model 绑定的是基本类型 -->
 <input type="checkbox" name="hobbies" id="box01" value="敲代码" v-model="hobbies01">
 <label for="box01">敲代码</label>
 <input type="checkbox" name="hobbies" id="box02" value="写代码" v-model="hobbies02">
 <label for="box02">写代码</label>
 <input type="checkbox" name="hobbies" id="box03" value="撸代码" v-model="hobbies03">
 <label for="box03">撸代码</label>
 <hr/>
 </div>
</body>

效果截图:

Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题

    初始化时,hobbies01值为空字符串转化为Boolean类型时false,所以未选中;hobbies02值为字符串“....”,转化为Boolean类型是true,所以默认选中;hobbies03默认值是false,所以初始化时未选中。

    此后,每次点击多选按钮,hobbies01、hobbies02、hobbies03的值都是 true | false 变化。

2、数组

    初始化时,v-model 绑定的变量是数组类型时。vue 认为这个复选按钮是用于获取值,会以选择(鼠标点击)的顺序将对应的值写入到数组中。

js代码段:

window.onload = function (){
 new Vue({
 el:"#app",
 data:{
  hobbies:[]
 }
 });
}

html代码段:

<body>
 <div id="app">
 <!-- v-model 绑定时数组 -->
 <input type="checkbox" name="hobbies" id="box01" value="敲代码" v-model="hobbies">
 <label for="box01">敲代码</label>
 <input type="checkbox" name="hobbies" id="box02" value="写代码" v-model="hobbies">
 <label for="box02">写代码</label>
 <input type="checkbox" name="hobbies" id="box03" value="撸代码" v-model="hobbies">
 <label for="box03">撸代码</label>
 </div>
</body>

效果截图:

Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题

    初始化时 hobbies 是一个空数组。注意鼠标点击顺序和 hobbies 值的对应变化。                 

三、下拉列表

    下拉列表:下拉列表中 v-model 写在下拉列表的标签中 <select>标签中。

    根据指定值选择对应<option> 添加选中状态。

    option 没有value属性 以 option 正反标签中的值 作为value。

3.1 下拉列表

js代码段:

window.onload = function (){
 new Vue({
 el:"#app",
 data:{
  s:""
 }
 });
}

html代码段:

<body>
 <div id="app">
 <select v-model="s">
  <option value="s1">小学</option>
  <option value="s2">中学</option>
  <option value="s3">大学</option>
  <option itany="itany" value="">请选择</option>
 </select>
 </div>
</body>

结果分析:

    因为变量 s 的初始值是空字符串,所以默认选择 “请选择选项”(可以根据s的初识值改变默认选项)。当选择其他option时,s 的值会随之改变(字符串:"s1"/"s2"/"s3")。

3.2 未写value值

    当未写 value 时, s 的值会变成 “小学”/“中学”/“大学”。

3.3 多选下拉列表

    multiple关键字,按住 ctrl 键进行多选。注意此时 model 绑定的变量应该是数组。

总结

以上所述是小编给大家介绍的Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript实现计算个人所得税
May 10 Javascript
学习JavaScript设计模式之观察者模式
Apr 22 Javascript
javascript检测移动设备横竖屏
May 21 Javascript
ECMAScript6快速入手攻略
Jul 18 Javascript
Bootstrap如何激活导航状态
Mar 22 Javascript
基于 Vue 实现一个酷炫的 menu插件
Nov 14 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
详解如何在项目中使用jest测试react native组件
Feb 09 Javascript
layui框架table 数据表格的方法级渲染详解
Aug 19 Javascript
Vue使用axios出现options请求方法
May 30 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
Sep 27 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
Vue官方文档梳理之全局配置
Nov 22 #Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
Nov 22 #Javascript
vue在使用ECharts时的异步更新和数据加载详解
Nov 22 #Javascript
echarts学习笔记之箱线图的分析与绘制详解
Nov 22 #Javascript
解析Vue2 dist 目录下各个文件的区别
Nov 22 #Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
Nov 22 #Javascript
echarts学习笔记之图表自适应问题详解
Nov 22 #Javascript
You might like
MySQL数据源表结构图示
2008/06/05 PHP
PHP中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
PHP接口继承及接口多继承原理与实现方法详解
2017/10/18 PHP
基于laravel where的高级使用方法
2019/10/10 PHP
使用隐藏的new来创建对象
2011/03/29 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
JS+CSS实现可拖动的弹出提示框
2015/02/16 Javascript
js图片轮播特效代码分享
2015/09/07 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
简单实现轮播图效果的实例
2016/07/15 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
2017/04/25 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
2017/08/08 Javascript
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
Vue框架里使用Swiper的方法示例
2018/09/20 Javascript
javascript实现图片轮播代码
2019/07/09 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
2020/01/11 jQuery
react antd表格中渲染一张或多张图片的实例
2020/10/28 Javascript
Python Paramiko模块的安装与使用详解
2016/11/18 Python
Python IDLE入门简介
2017/12/08 Python
用python处理图片实现图像中的像素访问
2018/05/04 Python
Python笔记之facade模式
2019/11/20 Python
python requests模拟登陆github的实现方法
2019/12/26 Python
Python基于smtplib模块发送邮件代码实例
2020/05/29 Python
python3爬虫中引用Queue的实例讲解
2020/11/24 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
联想澳大利亚官网:Lenovo Australia
2018/01/18 全球购物
医生实习工作总结的自我评价
2013/09/27 职场文书
护士岗前培训自我评鉴
2014/02/28 职场文书
专业技术职务聘任书
2014/03/29 职场文书
党员自我评价2015
2015/03/03 职场文书
2015年端午节活动方案
2015/05/05 职场文书
干部培训简讯
2015/07/20 职场文书
交通安全教育心得体会
2016/01/15 职场文书
浅谈Redis的keys命令到底有多慢
2021/10/05 Redis
python接口测试返回数据为字典取值方式
2022/02/12 Python
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android