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

v-model绑定checkbox无法动态更新视图

news 2026/5/17 8:44:53

在vue2中使用v-model绑定checkbox

            <input type="checkbox" v-model="isChecked" :value='isChecked' @change="handleCheckboxChange" />

监听change事件，并在change事件中做一些特殊处理，比如用户在登录时有没有阅读过隐私协议，在此之前有没有先填写手机号，如果没有通过校验，对于checkbox选中状态下应该取消选中。

问题

<body><div id="app"><div><input type="checkbox" v-model="isChecked" :value='isChecked' @change="handleCheckboxChange" /><label>{{ isChecked }}</label></div></div>
</body></html>
<script>var app = new Vue({el: '#app',data() {return {isChecked: false};},methods: {handleCheckboxChange() {console.log("checkbox ===>now:" + this.isChecked)this.isChecked = !this.isChecked;console.log("run[this.isChecked = !this.isChecked;] checkbox ===>now:" + this.isChecked)}}})
</script>

在这里插入图片描述
再执行this.isChecked = !this.isChecked后，checkbox的状态依旧是选中状态，并没有动态更新视图，v-model绑定的值为false，但是依旧是选中状态

为什么

首先来看v-model对于checkbox的原理：
在这里插入图片描述
v-model对于checkbox是实现的checked与change事件的结合（语法糖），通过代码我们也可以看出，属性已经很好的完成了响应的变化，这就可能是由于html元素input本身的原因了，再去看一下checkbox的属性：
在这里插入图片描述可以发现，checked只会在首次渲染，随后的checked值改变不再反应该变化，由此可见，为什么checkbox样式框没有发生变化的原因了

解决方案

1.刷新组件，页面重新渲染

      this.$nextTick(() => {this.isChecked = !this.isChecked;});

2.绑定checkbox的value值

<input type="checkbox" :value='isChecked' @change="handleCheckboxChange" />

使用v-model没有value属性
在这里插入图片描述

相关文章：

v-model绑定checkbox无法动态更新视图

在vue2中使用v-model绑定checkbox <input type"checkbox" v-model"isChecked" :valueisChecked change"handleCheckboxChange" />监听change事件&#xff0c;并在change事件中做一些特殊处理&#xff0c;比如用户在登录时有没有阅读过隐私…...

编程日记 2023/8/1 11:09:44

原生html—摆脱ps、excel 在线绘制财务表格加水印（html绘制表格js加水印）

文章目录 ⭐前言⭐html标签&#x1f496;table表格的属性&#x1f496;实现财务报表 ⭐结束 ⭐前言 大家好&#xff0c;我是yma16&#xff0c;本文分享原生html——绘制表格报表加水印。 背景&#xff1a;解决没有ps的情况下使用前端html制作表格报表。 html介绍 HTML&#xf…...

编程日记 2023/8/1 11:08:43

微信小程序配置上传多个u-upload上传

微信小程序配置上传多个u-upload上传 使用的是uView框架 微信小程序配置上传多个u-upload上传图片 场景需求&#xff1a;根据PC端配置项追加图片配置 小程序根据配置的图片数量&#xff0c;图片名称&#xff0c;进行上传图片 难度在于 我们不知道用户会追加多少个图片配置字段 …...

编程日记 2023/8/1 11:07:42

python使用win32com库实现对Excel的操作

使用win32com库实现对Excel的操作 1. 引言 在日常工作中&#xff0c;我们经常需要对Excel文件进行操作&#xff0c;例如读取和写入数据、格式化和样式、插入和删除等。而使用Python的win32com库&#xff0c;我们可以通过代码来实现对Excel的自动化操作&#xff0c;提高工作效…...

编程日记 2023/8/1 11:06:41

＜Maven＞项目依赖导入Maven本地仓库命令

项目工程pom.xml文件打开&#xff1a;查看报错的依赖, 将jar包放在D盘(或者其它路径都可)根目录下,在windows黑窗口执行以下命令; 举例&#xff1a;jar包名称&#xff1a; 1.api-1.0-SNAPSHOT102.jar 2.coms-cache-1.0-SNAPSHOT.jar 命令&#xff1a; mvn install:install-fi…...

编程日记 2023/8/1 11:05:40

爬虫006_python中的运算符_算术运算符_赋值运算符_复合赋值运算符_比较运算符_逻辑运算符_逻辑运算符性能提升---python工作笔记024

首先看加减乘除 然后看这里的 // 是取整数部分,不是四舍五入 然后%这个是取余数 然后**是,几次方那种 指数...

编程日记 2023/8/1 11:04:39

CPU Architecture Methodologies

MMU MMU(Memory Management Unit) 负责将逻辑地址转化为物理地址对于现代处理器来说&#xff0c;一般每个core都有自己的 MMU页表等数据结构保存在 TLB NUMA Non-uniform memory access (NUMA) is a computer memory design used in multiprocessing, where the memory access…...

编程日记 2023/8/1 11:02:37

Spring的@Scheduled

Spring的Scheduled的默认线程池数量为1&#xff0c;也就是说定时任务是单线程执行的。这意味着最多同时只有一个任务在执行。当一个任务还在执行时&#xff0c;其他任务会等待其完成&#xff0c;然后按照其预定的执行策略依次执行。 测试代码&#xff1a; 启动类上加注解Enab…...

编程日记 2023/8/1 11:01:36

IP隧道技术原理

简介 IP隧道技术是一种将一个协议的数据包封装在另一个协议的数据包中进行传输的技术。在网络通信中&#xff0c;不同的网络协议之间可能存在不兼容的情况&#xff0c;这时候就需要使用IP隧道技术来解决这个问题。 原理 IP隧道技术的原理是将一个协议的数据包封装在另一个协议…...

编程日记 2023/8/1 11:00:34

Docker私有仓库

Docker私有仓库 Docker官方的Docker hub&#xff08;https://hub.docker.com&#xff09;是一个用于管理公共镜像的仓库&#xff0c;我们可以从上面拉取镜像到本地&#xff0c;也可以把我们自己的镜像推送上去。但是&#xff0c;有时候我们的服务器无法访问互联网&#xff0c;…...

编程日记 2023/8/1 10:59:33

LLM微调 | Prefix-Tuning, Prompt-Tuning, P-tuning, P-tuning-v2

🔥 下面我只是分析讲解下这些方法的原理以及具体代码是怎么实现的，不对效果进行评价，毕竟不同任务不同数据集效果差别还是挺大的。 文章目录 0、hard prompt & soft prompt区别1、Prefix-Tuning2、Prompt-Tuning3、P-tuning4、P-tuning-v25、来看看adapter，lora，pref…...

编程日记 2023/8/1 10:58:32

Ansible 的脚本 --- playbook 剧本

目录 playbook 剧本 playbooks 本身由以下各部分组成 定义、引用变量 指定远程主机sudo切换用户 when条件判断 迭代 Templates 模块 1.先准备一个以 .j2 为后缀的 template 模板文件&#xff0c;设置引用的变量 2.修改主机清单文件&#xff0c;使用主机变量定义一个变…...

编程日记 2023/8/1 10:57:31

CSP-J模拟赛 / 买文具

限制条件 时间限制: 1000 ms, 空间限制: 256 MB 输入文件: pen.in, 输出文件&#xff1a;pen.out 题目描述 开学啦&#xff0c;为了准备新学期的课程学习&#xff0c;小贝到商店买文具。小贝买完文具回家&#xff0c;告诉妈妈说她买了钢笔、圆珠笔和铅笔总共x支&#xff0c…...

编程日记 2023/8/1 10:56:30

leecode算法--每日一题1

二分查找 给定一个 n 个元素有序的&#xff08;升序&#xff09;整型数组 nums 和一个目标值 target &#xff0c;写一个函数搜索 nums 中的 target&#xff0c;如果目标值存在返回下标&#xff0c;否则返回 -1。 前提条件必须满足&#xff1a; 目标数组必须是有序数组 所以…...

编程日记 2023/8/1 10:55:30

LViT：语言与视觉Transformer在医学图像分割

论文链接&#xff1a;https://arxiv.org/abs/2206.14718 代码链接&#xff1a;GitHub - HUANGLIZI/LViT: This repo is the official implementation of "LViT: Language meets Vision Transformer in Medical Image Segmentation" (IEEE Transactions on Medical I…...

编程日记 2023/8/1 10:54:26

蓝桥杯上岸每日N题 第五期(山)！！！

蓝桥杯上岸每日N题第五期 ❗️ ❗️ ❗️ 同步收录 &#x1f447; 蓝桥杯Java 省赛B组(初赛)填空题 大家好 我是寸铁&#x1f4aa; 冲刺蓝桥杯省一模板大全来啦 &#x1f525; 蓝桥杯4月8号就要开始了 &#x1f64f; 距离蓝桥杯省赛倒数第3天 ❗️ ❗️ ❗️ 还没背熟模…...

编程日记 2023/8/1 10:53:25

IDEA Writing classes... 比较慢

IDEA配置修改如下&#xff1a; 1、File -> Settings… 2、Build&#xff0c;Execution&#xff0c;Deployment -> Compiler Build process heap size 配置为 20483、Build&#xff0c;Execution&#xff0c;Deployment -> Compiler -> ActionScript & Flex C…...

编程日记 2023/8/1 10:52:24

opencv中轮廓相关属性

一、介绍 findContours() &#xff1a;The function retrieves contours from the binary image。 二、代码 void main() {Mat src imread("match00.bmp", IMREAD_GRAYSCALE);Mat mask;threshold(src, mask, 128, 255, cv::THRESH_BINARY_INV);Mat element cv::g…...

编程日记 2023/8/1 10:51:22

Leetcode 144. 二叉树的前序遍历

题目描述 题目链接&#xff1a;https://leetcode.cn/problems/binary-tree-preorder-traversal/description/ 代码实现 class Solution {List<Integer> l new ArrayList<>();public List<Integer> preorderTraversal(TreeNode root) {preoder(root);re…...

编程日记 2023/8/1 10:50:21

医学影像PACS系统源码：多功能服务器和阅片系统

PACS系统是以最新的IT技术为基础&#xff0c;遵循医疗卫生行业IHE/DICOM3.0和HL7标准&#xff0c;开发的多功能服务器和阅片系统。通过简单高性能的阅片功能&#xff0c;支持繁忙时的影像诊断业务&#xff0c;拥有保存影像的院内Web传输及离线影像等功能&#xff0c;同时具有备…...

编程日记 2023/8/1 10:49:18

用51单片机和HC-SR04超声波模块DIY一个倒车雷达（附完整代码和立创EDA原理图）

51单片机与HC-SR04超声波模块实战&#xff1a;打造高精度倒车雷达系统 在汽车电子和智能硬件领域&#xff0c;倒车雷达作为基础安全装置&#xff0c;其DIY实现不仅能帮助理解超声波测距原理&#xff0c;更是掌握嵌入式系统开发的绝佳实践。本文将手把手教你使用经典的STC89C52单…...

编程新知 2026/5/17 7:23:33

基于 Next.js 的无头电商架构实战：从 Vercel Commerce 看现代全栈开发

1. 项目概述&#xff1a;一个面向未来的全栈电商起点如果你最近在琢磨着用 Next.js 搞一个电商网站&#xff0c;或者想找一个现代、开箱即用的全栈电商模板来启动项目&#xff0c;那你大概率已经听说过vercel/commerce这个仓库了。它不是某个具体的电商平台&#xff0c;而是一个…...

编程新知 2026/5/17 6:59:25

ElevenLabs匈牙利语音API响应延迟飙升300%？内网穿透+CDN缓存+匈牙利语音素预加载三阶优化方案

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;ElevenLabs匈牙利文语音API响应延迟飙升300%的现象复现与根因定位 近期多位开发者反馈&#xff0c;ElevenLabs API 在处理匈牙利语&#xff08;hu-HU&#xff09;文本转语音请求时&#xff0c;平均端到…...

编程新知 2026/5/17 6:47:12

别再拷贝exe到NXBIN了！用批处理文件搞定NX二次开发外部exe的环境变量（附VS2015/NX12配置）

告别手动拷贝&#xff1a;用批处理智能管理NX二次开发环境变量 每次修改完NX二次开发的外部exe程序&#xff0c;都要手动拷贝到NXBIN目录&#xff1f;这种重复劳动不仅低效&#xff0c;还容易导致版本混乱。其实只需一个简单的批处理脚本&#xff0c;就能彻底解决环境变量配置问…...

编程新知 2026/5/17 6:16:57

gwadd：轻量级Git仓库组管理工具，提升多项目开发效率

1. 项目概述&#xff1a;一个被低估的Git仓库管理利器如果你和我一样&#xff0c;日常工作中需要频繁地在多个Git仓库之间穿梭&#xff0c;处理各种依赖、子模块&#xff0c;或者仅仅是同步一堆相关的项目代码&#xff0c;那么你一定对那种重复、繁琐的切换和操作感到头疼。今天…...

编程新知 2026/5/17 5:25:27

基于Claude API构建可编程AI智能体：从对话到自动化生产单元

1. 项目概述&#xff1a;从Claude中“招聘”一个AI伙伴最近在GitHub上看到一个挺有意思的项目&#xff0c;叫“hire-from-claude”。初看这个标题&#xff0c;你可能会有点摸不着头脑&#xff1a;Claude不是Anthropic公司开发的那个AI助手吗&#xff1f;怎么还能从它那里“招聘…...

编程新知 2026/5/17 4:31:35

手把手教你用SystemVerilog Interface搭建一个可复用的DMA寄存器验证环境

基于SystemVerilog Interface构建模块化DMA验证环境的工程实践 在数字IC验证领域&#xff0c;DMA&#xff08;直接内存访问&#xff09;控制器作为关键IP核&#xff0c;其寄存器验证环境的搭建效率直接影响项目进度。传统验证方法中信号连接冗长、时序控制分散的问题&#xff…...

编程新知 2026/5/17 4:20:16

MCP服务器生产级部署：从Docker到Kubernetes的完整工程化实践

1. 项目概述&#xff1a;一个为MCP服务器量身定制的部署蓝图如果你正在开发或使用一个基于模型上下文协议&#xff08;Model Context Protocol&#xff0c; MCP&#xff09;的服务器&#xff0c;并且为如何将其优雅、可靠地部署到生产环境而头疼&#xff0c;那么你很可能需要的…...

编程新知 2026/5/17 3:32:31

dotAI：将AI能力环境化，打造可配置的智能开发工作流

1. 项目概述&#xff1a;当AI成为你的“数字管家”最近在GitHub上看到一个挺有意思的项目&#xff0c;叫udecode/dotai。乍一看这个标题&#xff0c;你可能和我最初的反应一样&#xff0c;有点摸不着头脑。dotai&#xff1f;是“点AI”的意思吗&#xff1f;它和.env文件那种“点…...

编程新知 2026/5/17 2:13:34

基于节点电价的电网对电动汽车接纳能力评估模型研究（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程新知 2026/5/17 0:28:16