文档章节

vue复选框 模拟checkbox多选全选,vue页面加载屏蔽花括号

o
 osc_mervd488
发布于 2018/04/23 17:31
字数 191
阅读 0
收藏 0

精选30+云产品,助力企业轻松上云!>>>

1、解决vue页面渲染出现花括号的问题:

在最外层的dom节点上加上 v-cloak ,css里面

<div class="detail-content" id="detail-content" v-cloak>
....
</div>
css:
[v-cloak]{
display: none;
}

2、vue复选框 模拟checkbox多选全选

<div class="list">
            <div @click="checkAll">.</div>
            <div class="checkList" v-for="item in List">
                <div>
                    <span class="check" :class="{'isChecked':Listids.indexOf(item.id)>=0}"  @click="checkOne(item.id)"></span>
                </div>
            </div>
        </div>

 

data:function(){
          return{
              List:[
                  {id:1,value:'one'},
                  {id:2,value:'two'},
                  {id:3,value:'three'}
              ],
              Listids:[],
              isCheckAll:false,
          }
},
methods:{
          checkOne(id){
              var ids = this.Listids.indexOf(id);
              if(ids>=0){
                  //如果包含了该ID,则删除(单选按钮由选中变为非选中状态)
                  this.Listids.splice(ids,1);
              }else{
                  //选中该按钮
                  this.Listids.push(id);
              }
              console.log(this.Listids);
          },
          checkAll(){
              //全选
              let that = this;
              that.isCheckAll = !that.isCheckAll;
              if(that.isCheckAll){
                  that.Listids=[];
                  that.List.forEach(function(elm){
                      that.Listids.push(elm.id)
                  })
              }else{
                  that.Listids=[];
              }
              console.log(this.Listids);
          }
}

  

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

SnailSVN Pro for mac(SVN客户端) v1.9.9

macw为您带来SnailSVN Pro for mac ,SnailSVN Mac版是一款类似于 TortoiseSVN 的 Apache Subversion(SVN)客户端,与 Finder 紧密集成。SnailSVN Mac版允许你从 Finder 的上下文菜单中快速...

单手绕月
4分钟前
0
0
python网络编程(进程与多线程)

multiprocessing模块   由于GIL的存在,python中的多线程其实并不是真正的多线程,如果想要充分地使用多核CPU的资源,在python中大部分情况需要使用多进程。   multiprocessing包是Pytho...

osc_ky74f26k
4分钟前
0
0
CentOS7 redis5.0高可用部署

概述 Redis Sentinel为Redis提供高可用性。Redis Sentinel是一个分布式系统,Sentinel本身设计为在有多个Sentinel进程协同合作的配置中运行。具有多个Sentinel进程进行协作的优点如下: 1、当...

紅顏為君笑
4分钟前
0
0
Ocelot简易教程(四)之请求聚合以及服务发现

上篇文章给大家讲解了Ocelot的一些特性并对路由进行了详细的介绍,今天呢就大家一起来学习下Ocelot的请求聚合以及服务发现功能。希望能对大家有所帮助。 作者:依乐祝 原文地址:https://www...

osc_zo0djpuu
5分钟前
0
0
leetcode63(不同路径 II)--Java语言实现

求: 一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为“Start” )。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角(在下图中标记为“Finish”)。 现在...

拓拔北海
5分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部