<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-20191108(1)Mysql、Flask

    一.使用pymysql模块操作MYSQL 导入pymysql模块: pip install pymysql 1.增删改 import pymysql # 定义数据库连接信息 config = {    ...

  2. python后端面试第三部分:数据储存与缓存相关--长期维护

    1. 列举常见的关系型数据库和非关系型都有哪些?2. MySQL常见数据库引擎及比较?3. 简述数据三大范式?4. 什么是事务?MySQL如何支持事务?5. 简述数据库设计中一对多和多对多的应用场景? ...

  3. springboot学习笔记:10.springboot+atomikos+mysql+mybatis+druid+分布式事务

    前言 上一篇文章我们整合了springboot+druid+mybatis+mysql+多数据源: 本篇文章大家主要跟随你们涛兄在上一届基础上配置一下多数据源情况下的分布式事务: 首先,到底啥是分布式 ...

  4. Excel-DNA开发包:ExcelDna-0.34.6.zip下载

    Excel-DNA可以用VB.Net或C#开发Excel自定义函数.制作.xll格式的加载宏. 点此下载 ExcelDna-0.34.6.zip

  5. mysql首次使用过程以及彻底卸载过程

    安装过程: 步骤一: 安装mysql服务,使用命令行: yum install mysql-server 步骤二: 启动mysql服务: service mysqld start 确认msyql是否启 ...

  6. Java Class Loader Retrospect

  7. [LC] 64. Minimum Path Sum

    Given a m x n grid filled with non-negative numbers, find a path from top left to bottom right which ...

  8. 化学键|甘氨酸|谷氨酸|半胱胺酸|motif|domain|疏水相互作用|序列相似性|clustering analysis|Chou and Fasman|GOR|PHD|穿线法|first-principle ab initio folding|

    化学键|甘氨酸|谷氨酸|半胱胺酸|motif|domain|疏水相互作用|序列相似性|clustering analysis|Chou and Fasman|GOR|PHD|穿线法|first-pri ...

  9. unique()函数使用

    前提:要先令容器有序. unique的作用是“去掉”容器中相邻元素的重复元素(不一定要求数组有序),它会把重复的元素添加到容器末尾(所以数组大小并没有改变),而返回值是去重之后的尾地址. 用法:uni ...

  10. svn merge Property conflicts

    svn merge代码的时候,出现Property conflicts的解决方案.可以参考:http://stackoverflow.com/questions/23677286/conflict-w ...