<template>
  <div class="hello">
    <input type="button" name="all" value="全选" @click="allSelect"/>
    <input type="button" name="fan" value="全不选" @click="noSelect" />
    <input type="button" name="fan" value="反选" @click="fanSelect" />
    <ul v-for="(list,index) in dataCheck" :key="index">
      <li>
        <input type="checkbox" :value="list.text" v-model="list.check"/>
        {{list.text}}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data () {
    return {
      dataCheck: [
        { text: '苹果', check: false },
        { text: '芒果', check: false },
        { text: '百香果', check: false },
        { text: '果栋', check: false }
      ]
    }
  },
  methods: {
    allSelect () {
      console.log(1258)

      var datache = this.dataCheck
      for (var i = 0; i < datache.length; i++) {
        datache[i].check = true
      }
      this.dataCheck = datache
    },
    noSelect () {
      var datache = this.dataCheck
      for (var i = 0; i < datache.length; i++) {
        datache[i].check = false
      }
      this.dataCheck = datache
    },
    fanSelect () {
      var datache = this.dataCheck
      for (var i = 0; i < datache.length; i++) {
        datache[i].check = !datache[i].check
      }
      this.dataCheck = datache
    }
  }
}
</script>

vue-cli实现最简单的全选、全不选、反选功能。不容错过呦!!!!!话不多说直接上代码。。。。的更多相关文章

  1. Vue CLI 3.x 简单体验

    文档 中文文档 补充于02月10日 vue脚手架的3.x版本已经在开发中,现在还处于alpha版本.我们来看看有哪些变化. 使用 npm install -g @vue/cli 命名方式已经改为npm ...

  2. 使用vue/cli 创建一个简单的项目

    首先,电脑安装了node.js官方要求8.9 或更高版本 (推荐 8.11.0+) npm install -g @vue/cli # OR yarn global add @vue/cli 全局安装 ...

  3. 六. Vue CLI详解

    1. Vue CLI理解 1.1 什么是Vue CLI 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI,如果你在开发大型项目那么你需要它, 并且必然需要使用Vue CLI. 使 ...

  4. VUE实现简单的全选/全不选

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  5. [转]Vue CLI 3搭建vue+vuex 最全分析

    原文地址:https://my.oschina.net/wangnian/blog/2051369 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@ ...

  6. Vue CLI及其vue.config.js(一)

    有时候我们为了快速搭建一个vue的完整系统,经常会用到vue-cli,vue-cli用起来很方便而且命令简单容易上手,但缺点是在构建的时候我感觉有一些慢,因为CLI 服务 (@vue/cli-serv ...

  7. Vue CLI 3搭建vue+vuex 最全分析

    一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue ...

  8. 前端——Vue CLI 3.x搭建Vue项目

    一.Node安装 windows 1. Node.js (>=8.9, 推荐8.11.0+) Node官网下载 .msi 文件,按步骤下载安装即可. 安装完之后在cmd中输入 node -v,若 ...

  9. vue cli 3.0创建项目

    .npm i -g @vue/cli .vue create my-project 此处有两个选择: 1.default (babel, eslint)默认套餐,提供babel和eslint支持 2. ...

随机推荐

  1. python-django项目基础-haystack&whoosh&jieba_20191124

    全文检索框架和搜索引擎的安装和配置: 安装全文检索框架,pip install django-haystack, 安装搜索引擎,pip install whoosh settings里面配置 1,注册 ...

  2. deeplearning.ai 构建机器学习项目 Week 2 机器学习策略 II

    1. 误差分析(Error analysis) 误差分析的目的是找到不同误差源的比重,从而指引我们接下来往哪个方向努力改进.NG建议手工统计随机100个错误的误差源,比如对于猫分类器,错误的照片可能是 ...

  3. [LC] 79. Word Search

    Given a 2D board and a word, find if the word exists in the grid. The word can be constructed from l ...

  4. group compare vs pair compare

    成对总体检验是令y1=x11-x12:y2=x21-x22等,令新的随机变量y去做假设检验.此方法适用于排除物理因素影响,对差异更敏感,所以适用于小样本.而使用两个总体均值比较的方法适用于大样本.

  5. Spring Boot 学习笔记(六) 整合 RESTful 参数传递

    Spring Boot 学习笔记 源码地址 Spring Boot 学习笔记(一) hello world Spring Boot 学习笔记(二) 整合 log4j2 Spring Boot 学习笔记 ...

  6. Python---14面向对象高级编程(__slots__&@property)

    一.使用__slots__ 正常情况下,当我们定义了一个class,创建了一个class的实例后,我们可以给该实例绑定任何属性和方法,这就是动态语言的灵活性.先定义class: class Stude ...

  7. centos7系统盘变为只读文件的修复

    一台物理机的系统盘在磁盘空间有剩余的情况下变为只读了,咨询后发现前几日修改过系统,然后就不可写了,重启也不行.见下图 解决:参考链接https://bbs.51cto.com/thread-92640 ...

  8. Django学习之路05

    Django模板层 模板层语法(两类) 变量相关:{{      }} 逻辑相关:{%  %} 给模板传值的方法 #方法1 #通过字典传值,指名道姓,例如下 return render(request ...

  9. 中文字体压缩器-解决css引入的字体太大的问题

    字蛛是一个中文字体压缩器 官方网站:http://font-spider.org/index.html 用于解决页面引入的css字体过大的问题 使用方法: npm i -g font-spider 在 ...

  10. 14、创建/恢复ETH钱包身份

    借助网上的一段描述: 若以银行账户为类比,这 5 个词分别对应内容如下: 地址=银行卡号密码=银行卡密码私钥=银行卡号+银行卡密码助记词=银行卡号+银行卡密码Keystore+密码=银行卡号+银行卡密 ...