checkbox在vue中的用法总结
前言
关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样,
之前对于vue中用到过的checkbox也只是别人写好的组件,这次在自己实现时走了很多坑,特意写这篇文章记录下来,给后来者提供一个参考
在这之前,先看看原生checkbox搭配jquery取值的用法
<input type="checkbox" name="hobby" value="游泳">游泳
<input type="checkbox" name="hobby" value="健身">健身
<input type="checkbox" name="hobby" value="旅游">旅游
$(".section1 input[type=checkbox][name=hobby]").change(function(){
var obj = document.getElementsByName("hobby");
var check_val = [];
for(k in obj){
if(obj[k].checked){
check_val.push(obj[k].value);
}
}
$(".section1 .res").text(check_val);
});
checkbox禁用
<input type="checkbox" name="hobby" value="游泳" checked disabled="true">游泳
在vue中checkbox用法
在vue中,v-model其实是checked语法糖,通过v-model来判断当前checkbox是否被选中, 它绑定一个数组,选中项的值会自动添加到数组中
<div>请选择你的爱好(vue)</div>
<input type="checkbox" v-model="hobby2" value="游泳">游泳
<input type="checkbox" v-model="hobby2" value="健身">健身
<input type="checkbox" v-model="hobby2" value="旅游">旅游
<div>你已选中:{{hobby2}}</div>
var vm = new Vue({
el: '#app',
data:{
msg:'hello',
hobby2:[]
},
created(){
console.log('created')
},
method:{
login:function(){
alert(1)
}
}
})
vue中checkbox禁用
假如我们要求选项至少选择一个值,我们来通过disabled来禁止用户取消点击选项
这里主要是通过设置hobby2的值来控制checkbox选项的选中或取消
- 首先先将hobby2数组设置一个默认值hobby2:['游泳']
- 添加input点击事件
<input type="checkbox" v-model="hobby2" value="游泳" @click="handleClick">游泳
handleClick:function(ev){
var that = this;
setTimeout(function(){
console.log('this.hobby2',ev.target.checked,that.hobby2.length,that.hobby2)
if(!ev.target.checked){
if(that.hobby2.length==1){
that.lastcheckval = that.hobby2[0];
}
if(that.hobby2.length==0){
that.hobby2.push(that.lastcheckval)
}
}
},1)
}
- 通过获取点击事件 ev.target.checked的值判断当前点击状态是取消还是选中
如是取消状态,则判断当前hobby2长度为0时通过push将lastcheckval最后一个值添加进去,这样就无法取消最后一个选项
lastcheckval的值需要在hobby2数组长度为1时将选项值保存起来
setTimeout异步
这里的如果不使用setTimeout异步,当点击选中或者取消选项时,数组hobby2中的值还是上一个选项结果,为了保证一致添加setTimeout解决该问题
刚才我们通过控制v-model中hobby2的值来禁止用户取消最后一个选项,那如果我们要实现这样一个功能又如何做呢
- 用户最多只能选择2个选项 (交互效果:当当前选项长度为2时,用户去选择新的选项时,将第一个选项取消,依次类推)
在checked为false时添加如下代码,判断hobby2长度大于2时,将第一个元素删除
if(that.hobby2.length>2){
that.hobby2.splice(0,1);
}
自定义checkbox样式
默认的checkbox样式十分丑陋,不同的浏览器展示效果也不一样,如果是设计出图的话,我们就需要自定义样式,
结合vue checkbox选项禁用来自定义checkbox样式
原理
- 通过label标签将input包裹住通过label for绑定input id,当点击label时实际就是点击的input
将input设置opacity: 0;不可见 - 通过给div来设置checkbox的默认样式及选中状态样式
.section3 .checkboxlist{}
.checkboxlist label{
margin-left: 10px;
}
.checkboxlist .checkbox{
display: inline-block;
width: 14px;
height: 14px;
border: 1px solid #eee;
margin-right: -20px;
}
.checkboxlist .checkbox.checked{
background: blue;
}
.checkboxlist input{
opacity: 0;
}
checkbox选项选中状态checked类动态添加 ,判断hobby3中是否存在当前选项值来觉得是否绑定checked类
:class="hobby3.indexOf('游泳')!=-1?'checked':''"
<label for="游泳">
<div class="checkbox" :class="hobby3.indexOf('游泳')!=-1?'checked':''"></div>
<input type="checkbox" id="游泳" v-model="hobby3" value="游泳" @click="handleClick">游泳
</label>
<label for="健身">
<div class="checkbox" :class="hobby3.indexOf('健身')!=-1?'checked':''"></div>
<input type="checkbox" id="健身" v-model="hobby3" value="健身" @click="handleClick">健身
</label>
<label for="旅游">
<div class="checkbox" :class="hobby3.indexOf('旅游')!=-1?'checked':''"></div>
<input type="checkbox" id="旅游" v-model="hobby3" value="旅游" @click="handleClick">旅游
</label>
<label for="爬山">
<div class="checkbox" :class="hobby3.indexOf('爬山')!=-1?'checked':''"></div>
<input type="checkbox" id="爬山" v-model="hobby3" value="爬山" @click="handleClick">爬山
</label>
参考
https://blog.csdn.net/mutouren121/article/details/80608587
https://segmentfault.com/q/1010000009364296
https://blog.csdn.net/mia1106/article/details/79567043
checkbox在vue中的用法总结的更多相关文章
- checkbox在vue中的用法小结
关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样,之前对于vue插 ...
- 【vue】vue中ref用法
1.获取当前元素: 例子: <div class="pop pos-a" :style="{ left: pop_x + 'px' ,top: pop_y + 'p ...
- swiper在vue中的用法
首先通过npm i vue-awesome-swiper --save 来在vue中下载插件 然后再main.js中引入 require('swiper/dist/css/swiper.css')im ...
- Vue中import用法
1. 引入第三方插件 第三方常用插件参考https://blog.csdn.net/vbirdbest/article/details/86527886 2. 导入 css 文件 import 'iv ...
- Vue中computed用法
computed是什么?对于任何复杂逻辑,你都应当使用计算属性.computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义.然后就可以在页面上进行双向数据绑定展 ...
- 分享vue中 slot用法
//slot默认用法 //slot带参数name用法
- vue中class用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- momentjs在vue中的用法
js代码 import moment from 'moment'; const jsCountDown = document.getElementById('js-countdown'); const ...
- vue中的一些用法,持续更新中......
1.跳转用法 @1.在template模板中通常使用router-link to='url' @2.在js中 1.this.$router.push({path: ''/order/index''}) ...
随机推荐
- Python3基础知识之运算符
题:今天学习python运算符,学完了回头看看与.net和java有什么异同. 目标:学习了解运算符,学会一般的应用. 相关知识: Python语言支持以下类型的运算符: 算术运算符 比较(关系)运算 ...
- 使用itext生成pdf的,各种布局
代码如下,jar包为itext.jar,itextAsia.jar,最好都是最新的 :2张图片也在最后贴出,把图片放到D盘可以直接生成制定格式的pdf. 最后生成的pdf如下: 代码如下: packa ...
- Nginx Redirect Websocket
I want to redirect my websocket to another server. As we known, nginx command rewrite or redirect ca ...
- PHP字符串函数之 strcmp strncmp strcasecmp strncasecmp strnatcmp strnatcasecmp
strcmp – 二进制安全字符串比较 strncmp – 二进制安全比较字符串开头的若干个字符 strcasecmp – 二进制安全比较字符串(不区分大小写) strncasecmp – 二进制安全 ...
- 《mysql必知必会》学习_第16章_20180807_欢
第16章:创建高级联结. P106 select concat(RTrim(vend_name),'(',RTrim(vend_country),')') as vend_title from ven ...
- 有关C++模板inline的高性能在lambda与function的体现
前两天在群里跟人讨论到写库时对于lambda和function的取舍,跑了写测试查了些资料后基本得出结论: 如果没有自由变量的情况下,一般不要用function. 如果有自由变量的话,C++中的lam ...
- grid布局笔记学习一之父元素(容器)
HTML代码: <div id="box"> <div class="lbox box1" style="background: # ...
- Android Bitmap操作问题之Canvas: trying to use a recycled bitmap
一.Bitmap.recycle 方法被弃用 在Android中,Bitmap的存储分为两部分,一部分是Bitmap的数据,一部分是Bitmap的引用.在Android2.3时代,Bitmap的引用是 ...
- JSON 字符串解析技巧总结
在解析JSONObject的字符数据的时候,可以考虑去使用optString 解析网络JSON数据时,获取数据的两个方法optString和getString: 使用optString获取数据时,即使 ...
- Array.prototype.slice.call引发的思考
概述 今天在看书的时候看到Array.prototype.slice.call(arguments),有点看不懂,所以认真研究了一下,记录下来,供以后开发时参考,相信对其他人也有用. call 每一个 ...