HTML
<multicheck :source=tlist :busValue='objInfo.tt' @getTt="getTtInfo"></multicheck> data tlist:[
{value:'A',label:'1'},
{value:'B',label:'2'},
{value:'C',label:'3'},
{value:'D',label:'4'},
{value:'E',label:'5'}
]
methods
getTtInfo:function(par){
this.objInfo.tt= par;
}

子组件:

<template>
<div id="multicheck">
<span v-for='item in source' class="check-item">
<input ref='tt' type="checkbox" :value="item.value" name="tt" @click='updateValue($event.target.value)'>{{item.label}}
</span>
</div>
</template>
<style scoped type="text/css">
.check-item{
display:inline-block;
padding-right:14px;
font-size:14px;
}
</style>
<script>
export default{
name:'multicheck',
props:{
source:{
type:Array
},
busValue:{
type:String
}
},
data(){
return{
ttVal :this.busValue
}
},
computed:{
},
methods:{
busToArr(str){
if(str!=''){
if(str.indexOf(',')==-1){
return [str];
}else{
return str.split(',');
}
}else{
return [];
}
},
busToStr(arr){
return arr.join(',');
},
isInAarrayIndex(arr,e){
var haveAindex={
isHave:false,
index:-1
};
if(arr.length==0){
haveAindex.isHave = false;
haveAindex.index = -1;
return JSON.stringify(haveAindex);
}else{
for(var i=0;i<arr.length;i++){
if(arr[i]==e){
haveAindex.isHave = true;
haveAindex.index = i;
break;
}
}
return JSON.stringify(haveAindex);
}
},
updateValue(value){
var busCurtArr = this.busToArr(this.ttVal);
var haveIndex = JSON.parse(this.isInAarrayIndex(busCurtArr,value))
if(haveIndex.isHave){
busCurtArr.splice(haveIndex.index,1);
}else{
busCurtArr.push(value);
}
busCurtArr.sort();
this.ttVal = this.busToStr(busCurtArr);
this.$emit('getTt', this.busToStr(busCurtArr));
}
},
mounted:function(){
if(this.ttVal!=''){
var busArr = this.busToArr(this.ttVal);
for(var i =0 ;i<busArr.length;i++){
this.$refs.tt.forEach(function(item){
if(item.value == busArr[i]){
item.checked = true;
}
});
}
} } }
</script>

  

利用vue写一个复选框的组件的更多相关文章

  1. js做全选,用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false

    用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false,当所有checkbox都被选中时,全选按钮也被选中. 详解: 有两种 ...

  2. 用js判断一个复选框是否被选中

    <html> <head>        <title>            复选框全选.全不选.反选.必选一个        </title>    ...

  3. vue.js带复选框表单的增删改查

    近段时间由于公司项目要求,前端开始使用VUE框架进行开发,最近刚开始学习,做了一个表单的增删改查,和大家分享一下. 页面模型代码设计如下 <template> <div id=&qu ...

  4. 如何利用jq来实现复选框的全选,反选!

    $("document").ready(function(){ $("#btn1").click(function(){ $("[name='chec ...

  5. vue.js实现单选框、复选框和下拉框

    Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下边以单选框.复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式. 一.单选框   在传统的HTM ...

  6. [转]jquery如何判断checkbox(复选框)是否被选中,至少被选中一个

    谁都知道 在html 如果一个复选框被选中 是 checked="checked". 但是我们如果用jquery alert($("#id").attr(&qu ...

  7. Web前端之复选框选中属性

    熟悉web前端开发的人都知道,判断复选框是否选中是经常做的事情,判断的方法很多,但是开发过程中常常忽略了这些方法的兼容性,而是实现效果就好 了.博主之前用户不少方法,经常Google到一些这个不好那个 ...

  8. 在php中验证复选框

    PHP接收多个同名复选框信息不像ASP那样自动转换成为数组,这给使用带来了一定不便.但是还是有解决办法的,就是利用javascript做一下预处理.多个同名复选框在javascript中还是以数组的形 ...

  9. Extjs 3.4 复选框的,默认选中 ,禁用,(纯属于自己代码中需要,总结!)

    var sm = new Ext.grid.CheckboxSelectionModel( {         //一个特定的选择模型,它将渲染一列复选框,可以用来选择或反选多行数据.         ...

随机推荐

  1. pycharm如何设置注释的字体颜色

    一.pycharm如何设置注释的字体颜色 1.打开pycharm编辑器,file > settings > Editor > Color Scheme > python > ...

  2. boost生成json

    boost property_tree解析json文件相关文档如下:json_parser.basic_ptree json_parser:read_json(filename, ptree):用于将 ...

  3. [django]django权限简单实验

    djagno https://www.jianshu.com/p/01126437e8a4 开始我一直没明白内置的view_car 怎么实现view 只读库的. 后来发现这个api需要在views.p ...

  4. DLNg改善深层NN:第一周DL的实用层面

    1.为什么正则化可以减少过拟合? //答:可以让模型参数变小,减小模型的方差. 在损失函数中加入正则项,在正则化时,如果参数lamda设置得足够大,那么就相当于权重系数W接近于0 ,就会减少很多隐藏单 ...

  5. linux上pem格式私钥转pfx格式证书的命令

    1.root.csr 可改成其它名字,后缀名不改 openssl req -new -key 私钥名称.pem -out root.csr 2.root.crt 可改成其它名字,后缀名不改 opens ...

  6. 引:Jmeter添加变量的四种方法

    一.在样本中添加同请求一起发送的参数.根据服务器设置的数据类型,来添加不同类型的参数 二.用户定义的变量 1.创建:添加->配置元件->用户定义的变量 2.作用:当前的线程组内所有Samp ...

  7. VirtualBox 在Win10上的蓝屏问题

    今天也是第一次使用VirtualBox ,因为比VM更轻量,当然主要还是版权,结果装完虚拟机后,每次打开虚拟机就蓝屏,系统报错. 这是出现在WIN10上的问题啊. 解决办法: 找到Control Pa ...

  8. 无法序列化会话状态。在“StateServer”或“SQLServer”模式下,ASP.NET 将序列化会话状态对象,因此不允许使用无法序列化的对象或 MarshalByRef 对象。如果自定义会话状态存储在“Custom”模式下执行了类似的序列化,则适用同样的限制。

    将项目部署到服务器后发现有如下问题,查了网上好多说是需要被序列化的类没有写上[Serializable]标志,所以把全部需要序列化的列都写上了标志发现还是不是,最后查到了发现网上说的并不太准确,而是需 ...

  9. 实验:记录一则删除GI的过程

    环境: RHEL 6.5 + Oracle GI 11.2.0.4 (2 nodes) 参考MOS文档 How to Deconfigure/Reconfigure(Rebuild OCR) or D ...

  10. react native 初识生命周期

    关于生命周期这块,我是看到慕课堂的一个视频,觉得将的很好,引入很容易理解,地址是:https://www.imooc.com/video/14288  如果你们想了解一下,也可以去看看 RN 组件的生 ...