vue-cli实现最简单的全选、全不选、反选功能。不容错过呦!!!!!话不多说直接上代码。。。。
<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实现最简单的全选、全不选、反选功能。不容错过呦!!!!!话不多说直接上代码。。。。的更多相关文章
- Vue CLI 3.x 简单体验
文档 中文文档 补充于02月10日 vue脚手架的3.x版本已经在开发中,现在还处于alpha版本.我们来看看有哪些变化. 使用 npm install -g @vue/cli 命名方式已经改为npm ...
- 使用vue/cli 创建一个简单的项目
首先,电脑安装了node.js官方要求8.9 或更高版本 (推荐 8.11.0+) npm install -g @vue/cli # OR yarn global add @vue/cli 全局安装 ...
- 六. Vue CLI详解
1. Vue CLI理解 1.1 什么是Vue CLI 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI,如果你在开发大型项目那么你需要它, 并且必然需要使用Vue CLI. 使 ...
- VUE实现简单的全选/全不选
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- [转]Vue CLI 3搭建vue+vuex 最全分析
原文地址:https://my.oschina.net/wangnian/blog/2051369 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@ ...
- Vue CLI及其vue.config.js(一)
有时候我们为了快速搭建一个vue的完整系统,经常会用到vue-cli,vue-cli用起来很方便而且命令简单容易上手,但缺点是在构建的时候我感觉有一些慢,因为CLI 服务 (@vue/cli-serv ...
- Vue CLI 3搭建vue+vuex 最全分析
一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue ...
- 前端——Vue CLI 3.x搭建Vue项目
一.Node安装 windows 1. Node.js (>=8.9, 推荐8.11.0+) Node官网下载 .msi 文件,按步骤下载安装即可. 安装完之后在cmd中输入 node -v,若 ...
- vue cli 3.0创建项目
.npm i -g @vue/cli .vue create my-project 此处有两个选择: 1.default (babel, eslint)默认套餐,提供babel和eslint支持 2. ...
随机推荐
- python-django项目基础-haystack&whoosh&jieba_20191124
全文检索框架和搜索引擎的安装和配置: 安装全文检索框架,pip install django-haystack, 安装搜索引擎,pip install whoosh settings里面配置 1,注册 ...
- deeplearning.ai 构建机器学习项目 Week 2 机器学习策略 II
1. 误差分析(Error analysis) 误差分析的目的是找到不同误差源的比重,从而指引我们接下来往哪个方向努力改进.NG建议手工统计随机100个错误的误差源,比如对于猫分类器,错误的照片可能是 ...
- [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 ...
- group compare vs pair compare
成对总体检验是令y1=x11-x12:y2=x21-x22等,令新的随机变量y去做假设检验.此方法适用于排除物理因素影响,对差异更敏感,所以适用于小样本.而使用两个总体均值比较的方法适用于大样本.
- Spring Boot 学习笔记(六) 整合 RESTful 参数传递
Spring Boot 学习笔记 源码地址 Spring Boot 学习笔记(一) hello world Spring Boot 学习笔记(二) 整合 log4j2 Spring Boot 学习笔记 ...
- Python---14面向对象高级编程(__slots__&@property)
一.使用__slots__ 正常情况下,当我们定义了一个class,创建了一个class的实例后,我们可以给该实例绑定任何属性和方法,这就是动态语言的灵活性.先定义class: class Stude ...
- centos7系统盘变为只读文件的修复
一台物理机的系统盘在磁盘空间有剩余的情况下变为只读了,咨询后发现前几日修改过系统,然后就不可写了,重启也不行.见下图 解决:参考链接https://bbs.51cto.com/thread-92640 ...
- Django学习之路05
Django模板层 模板层语法(两类) 变量相关:{{ }} 逻辑相关:{% %} 给模板传值的方法 #方法1 #通过字典传值,指名道姓,例如下 return render(request ...
- 中文字体压缩器-解决css引入的字体太大的问题
字蛛是一个中文字体压缩器 官方网站:http://font-spider.org/index.html 用于解决页面引入的css字体过大的问题 使用方法: npm i -g font-spider 在 ...
- 14、创建/恢复ETH钱包身份
借助网上的一段描述: 若以银行账户为类比,这 5 个词分别对应内容如下: 地址=银行卡号密码=银行卡密码私钥=银行卡号+银行卡密码助记词=银行卡号+银行卡密码Keystore+密码=银行卡号+银行卡密 ...