当前位置: 首页 > news >正文

vue2和vue3 全选

 vue3

<template><input type="checkbox" v-model="selectAll" />全选<ul><li v-for="item in list" :key="item.id">{{ item.value }} <input type="checkbox" v-model="item.check" /></li></ul>
</template>
​
<script>
import { computed, reactive } from '@vue/reactivity'
export default {setup () {const list = reactive([{id: 1,value: 15,check: false},{id: 2,value: 78,check: false},{id: 3,value: 63,check: false},{id: 4,value: 92,check: false},{id: 5,value: 38,check: false}])// computedconst selectAll = computed({get () {return list.every(item => item.check)},set (status) {console.log(status)list.forEach(item => { item.check = status })}})return { list, selectAll }}
}
</script>
​

vue2

<template><div><!-- 全选控制框 --><input type="checkbox" v-model="selectAll" />全选<!-- 列表 --><ul><li v-for="item in list" :key="item.id">{{ item.value }} <input type="checkbox" v-model="item.check" /></li></ul></div>
</template>
​
<script>
export default {data () {return {list: [{id: 1,value: 12,check: true},{id: 2,value: 45,check: false},{id: 3,value: 78,check: false},{id: 4,value: 96,check: false}]}},computed: {selectAll: {get () {return this.list.every(item => item.check)},set (state) {console.log(state)this.list.forEach(item => { item.check = state })}}}
}
</script>
​

相关文章:

vue2和vue3 全选

vue3 <template><input type"checkbox" v-model"selectAll" />全选<ul><li v-for"item in list" :key"item.id">{{ item.value }} <input type"checkbox" v-model"item.check" />…...

Java中的Set、List、Map的区别及主要实现类方法

Java中的Set、List、Map的区别 数组是大小固定的&#xff0c;并且同一个数组只能存放类型一样的数据&#xff08;基本类型/引用类型&#xff09;&#xff0c;JAVA集合可以存储和操作数目不固定的一组数据。 所有的JAVA集合都位于 java.util包中&#xff01; JAVA集合只能存放引…...

gitignore:常用说明

示例&#xff1a; Java HELP.md target/ !.mvn/wrapper/maven-wrapper.jar !**/src/main/** !**/src/test/**### IntelliJ IDEA.idea *.iws *.iml *.ipr### NetBeans/nbproject/private/ /nbbuild/ /dist/ /nbdist/ /.nb-gradle/ build/ logs/### VS Code.vscode/ 说明&#…...

HarmonyOS NEXT应用开发—在Native侧实现进度通知功能

介绍 本示例通过模拟下载场景介绍如何将Native的进度信息实时同步到ArkTS侧。 效果图预览 使用说明 点击“Start Download“按钮后&#xff0c;Native侧启动子线程模拟下载任务Native侧启动子线程模拟下载&#xff0c;并通过Arkts的回调函数将进度信息实时传递到Arkts侧 实…...

水利自动化控制系统平台介绍

水利自动化控制系统平台介绍 在当今社会&#xff0c;水资源的管理和保护日益成为全球关注的重要议题。随着科技的进步和信息化的发展&#xff0c;水利监测系统作为一种集成了现代信息技术、自动化控制技术以及环境监测技术的综合性平台&#xff0c;正在逐步改变传统的水利管理模…...

flask后端+网页前端:基于 socket.io 的双向通信和服务器部署

我想实现的效果是&#xff0c;我的服务器提供两个路由网址&#xff0c;网页A用于拍照、然后录音&#xff0c;把照片和录音传给服务器&#xff0c;服务器发射信号&#xff0c;通知另一个路由的网页B更新&#xff0c;把刚刚传来的照片和录音显示在网页上。 然后网页B用户根据这个…...

【Docker】解决 docker build 提示 `Wrong architecture ‘amd64‘`

解决 docker build 提示 Wrong architecture amd64 使用 securify2 的 docker 版本进行 sc 安全扫描 执行语句 RUN wget https://github.com/souffle-lang/souffle/releases/download/1.6.2/souffle_1.6.2-1_amd64.deb -O /tmp/souffle.deb &&\ gdebi --n /tmp/souff…...

机器学习_XGBoost模型_用C++推理示例Demo

1. 需求 将 python 训练好的 xgboost 模型, 使用C 进行加载并进行推理(预测) 2. 代码实现 #include <iostream> #include <fstream> #include <sstream> #include <vector> #include <string> #include <xgboost/c_api.h>const char *m…...

C语言 | Leetcode C语言题解之第21题合并两个有序链表

题目&#xff1a; 题解&#xff1a; /*** Definition for singly-linked list.* struct ListNode {* int val;* struct ListNode *next;* };*/typedef struct ListNode ListNode; struct ListNode* mergeTwoLists(struct ListNode* list1, struct ListNode* list2) {/…...

2024考研调剂须知

----------------------------------------------------------------------------------------------------- 考研复试科研背景提升班 教你快速深入了解掌握考研复试面试中的常见问题以及注意事项&#xff0c;系统的教你如何在短期内快速提升自己的专业知识水平和编程以及英语…...

PCIE协议版--M.2接口规范V1.0中文版1——电气规格篇

3.电气规范 3.1 Connectivity Socket 1 系统接口信号 表15适用于Socket 1-SD和Socket 1-DP输出版本。 3.1.1.补充NFC信号 当一个SIM设备被用作安全元素时&#xff0c;NFC解决方案可以与表16中列出的附加信号相结合。 3.1.2.电源和地 PCI Express M.2 Socket 1使用一个3.3 V…...

【JVM】JVM堆占用情况分析(频繁创建的对象、内存泄露等问题)、jmap+jhat、jvisualvm工具使用

文章目录 一. 相关命令1. 查看进程堆内存整体使用情况&#xff1a;OOM的可能2. 统计类的对象数量以及内存占用&#xff1a;定位内存泄漏 二. 分析内存占用1. 使用 jhat 排查对象堆占用情况1.1. 排查步骤1.2. 具体分析例子a. 分析频繁创建对象导致的OOM 1.3. OQL查看某一个对象的…...

【蓝桥杯每日一题】4.11 更小的数(不用区间DP)

题目来源&#xff1a; 蓝桥杯 2023 省 A]更小的数 - 洛谷 这题只需要用到双指针就OK~ 思路1&#xff1a; 翻转数组的子数组&#xff0c;然后进行比较大小将翻转后的数组存储在字符串 k k k中&#xff0c;然后将字符串 k k k与字符串 a a a进行逐一元素比较&#xff08;因为…...

【线段树】2276. 统计区间中的整数数目

算法可以发掘本质&#xff0c;如&#xff1a; 一&#xff0c;若干师傅和徒弟互有好感&#xff0c;有好感的师徒可以结对学习。师傅和徒弟都只能参加一个对子。如何让对子最多。 二&#xff0c;有无限多1X2和2X1的骨牌&#xff0c;某个棋盘若干格子坏了&#xff0c;如何在没有坏…...

ChatGPT 写作利器:探索ChatGPT在论文写作中的应用

ChatGPT无限次数:点击直达 ChatGPT 写作利器&#xff1a;探索ChatGPT在论文写作中的应用 引言 ChatGPT是一种强大的自然语言处理工具&#xff0c;能够为我们提供高效、准确的文本生成功能。在论文写作领域&#xff0c;ChatGPT的应用也逐渐受到关注。本文将探讨ChatGPT在论文写…...

从 SQLite 3.4.2 迁移到 3.5.0(二十)

返回&#xff1a;SQLite—系列文章目录 上一篇:SQLite---调试提示&#xff08;十九&#xff09; 下一篇&#xff1a;SQLite—系列文章目录 ​ SQLite 版本 3.5.0 &#xff08;2007-09-04&#xff09; 引入了一个新的操作系统接口层&#xff0c; 与所有先前版本的 SQLi…...

集群开发学习(一)(安装GO和MySQL,K8S基础概念)

完成gin小任务 参考文档&#xff1a; https://www.kancloud.cn/jiajunxi/ginweb100/1801414 https://github.com/hanjialeOK/going 最终代码地址&#xff1a;https://github.com/qinliangql/gin_mini_test.git 学习 1.安装go wget https://dl.google.com/go/go1.20.2.linu…...

[Kubernetes[K8S]集群:Slaver从节点初始化和Join]:添加到主节点集群内

文章目录 操作流程&#xff1a;上篇主节初始化地址&#xff1a;前置&#xff1a;Docker和K8S安装版本匹配查看0.1&#xff1a;安装指定docker版本 **[1 — 8] ** [ 这些步骤主从节点前置操作一样的 ]一&#xff1a;主节点操作 查看主机域名->编辑域名->域名配置二&#x…...

redis复习笔记08(小滴课堂)

案例实战需求之大数据下的用户画像标签去重 我们就简单的做到了去重了。 案例实战社交应用里面之关注、粉丝、共同好友案例 这就是我们set的一个应用。 案例实战之SortedSet用户积分实时榜单最佳实践 准备积分类对象&#xff1a; 我们加上构造方法和判断相等的equals和hascod…...

在线课程平台LearnDash评测 – 最佳 WordPress LMS插件

在我的LearnDash评测中&#xff0c;我探索了流行的 WordPress LMS 插件&#xff0c;该插件以其用户友好的拖放课程构建器而闻名。我深入研究了各种功能&#xff0c;包括课程创建、测验、作业、滴灌内容、焦点模式、报告、分析和管理工具。 我的评测还讨论了套餐和定价选项&…...

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...

React Native 开发环境搭建(全平台详解)

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

Frozen-Flask :将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

NLP学习路线图(二十三):长短期记忆网络(LSTM)

在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...