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

vueday01——ref响应式

特性:持续监控某个响应式变量的属性名变化,可以使用shallowRef来取消这一特性,只监控对象整体的变化

ref测试代码:

<template><div :id="idValue" ref="myDiv">打印obj{{ obj }}</div><!-- <div v-if="true"> 我是if</div> --><!-- <div v-show="false"> 我是if</div> --><!-- <button :disabled="true" @click="printId">Print ID {{ resultId }}</button> --><button v-on:[eventName]="doSomething">我是click动态参数按钮</button>
</template><script setup="ts">
import { ref } from 'vue'// 响应式状态
const idValue = ref("defaultValue")
const resultId =ref("")
const eventName = "click"
const obj = ref({attribute1:[1,2,3,4,5,6,7,8,9,10],attribute2:{cont:0},
})
// 用来修改状态、触发更新的函数
// const  increment = ()=> {
//   count.value++
// }
const doSomething =()=>{obj.value.attribute1.push(11)obj.value.attribute2.cont++
}
// const rawHtml ="<span style='color:red'>htmlTest</span>"</script>

结果1:

shallowRef测试代码:

<template><div :id="idValue" ref="myDiv">打印obj{{ obj }}</div><!-- <div v-if="true"> 我是if</div> --><!-- <div v-show="false"> 我是if</div> --><!-- <button :disabled="true" @click="printId">Print ID {{ resultId }}</button> --><button v-on:[eventName]="doSomething">我是click动态参数按钮</button>
</template><script setup="ts">
import { ref, shallowRef } from 'vue'// 响应式状态
const idValue = ref("defaultValue")
const resultId =ref("")
const eventName = "click"
const obj = shallowRef({attribute1:[1,2,3,4,5,6,7,8,9,10],attribute2:{cont:0},
})
// 用来修改状态、触发更新的函数
// const  increment = ()=> {
//   count.value++
// }
const doSomething =()=>{obj.value.attribute1.push(11)obj.value.attribute2.cont++
}
// const rawHtml ="<span style='color:red'>htmlTest</span>"</script>

 结果:

相关文章:

vueday01——ref响应式

特性&#xff1a;持续监控某个响应式变量的属性名变化&#xff0c;可以使用shallowRef来取消这一特性&#xff0c;只监控对象整体的变化 ref测试代码&#xff1a; <template><div :id"idValue" ref"myDiv">打印obj{{ obj }}</div><…...

SpringBoot集成Redisson操作Redis

目录 一、前言二、基础集成配置&#xff08;redis单节点&#xff09;2.1、POM2.2、添加配置文件2.3、添加启动类2.4、添加测试类测试redisson操作redis 一、前言 Redisson 是一个在 Redis 的基础上实现的 Java 驻内存数据网格&#xff0c;Redisson相比较与Jedis和Lettuce来说最…...

整数反转

题目&#xff1a; 给你一个 32 位的有符号整数 x &#xff0c;返回将 x 中的数字部分反转后的结果。 如果反转后整数超过 32 位的有符号整数的范围 [−231, 231 − 1] &#xff0c;就返回 0。 假设环境不允许存储 64 位整数&#xff08;有符号或无符号&#xff09;。 示例 …...

【ELK使用指南 2】常用的 Logstash filter 插件详解(附应用实例)

Logstash filter 一、logstash filter过滤插件的常用模块简介二、grok 正则捕获插件2.1 grok插件的作用2.2 内置正则表达式2.3 自定义正则表达式 三、mutate 数据修改插件3.1 mutate插件的作用3.2 常用的配置选项3.3 mutate插件应用实例 四、multiline 多行合并插件4.1 multili…...

(转)STR 内核做了什么

参考这篇文章&#xff1a; Linux电源管理(6)_Generic PM之Suspend功能 写的很清晰...

fastapi项目结构以及多进程部署

环境&#xff1a; python3.10.x Linux/centos 背景&#xff1a; 最近在用FastApi开发数据统计&#xff0c;并将统计数据返回给前端展示的数据系统。 数据库&#xff1a; mongodb&#xff0c; python包为mongoEngine 项目结构 main.py api middleware router-- __init__.py-- …...

【LeetCode】 412. Fizz Buzz

题目链接 文章目录 Python3 【O(n) O(1)】C.emplace_back() 【C 11 之后】 Python3 【O(n) O(1)】 初始版本 class Solution:def fizzBuzz(self, n: int) -> List[str]:ans []for i in range(1, n1):if i % 5 0 and i % 3 0:ans.append("FizzBuzz")elif i % …...

vector+算法sort与list+sort的效率比较,容易写错的地方原因探析

我写的代码&#xff1a; #include <iostream> using namespace std; #include <vector> #include <list> #include <algorithm> int main() {const int N 10000000;vector<int> v;list<int> l;for (int i 0; i < N; i){v.push_back(…...

iOS——Manager封装网络请求

在之前的项目里&#xff0c;我们都是把网络请求写在viewController的viewDidLoad&#xff0c;而实际中使用的时候并不能这么简单&#xff0c;对于不同的需要&#xff0c;我们需要有不同的网络请求。所以我们可以用单例模式创建一个全局的Manager类&#xff0c;用实例Manager来执…...

【javascript】内部引入与外部引入javascript

创建a.html 内部引入&#xff1a; 外部引入&#xff1a; 创建a.js 注意&#xff1a; 我这里的a.js和a.html是放在同一个目录下&#xff0c;如果a.js放在js的目录下&#xff0c;a.html 调用a.js的时候 <script src"/js/a.js"></script>...

掌握JavaScript的练习之道:十个手写函数让你信手拈来!

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…...

买卖股票的最佳时机 II[中等]

优质博文&#xff1a;IT-BLOG-CN 一、题目 给你一个整数数组prices&#xff0c;其中prices[i]表示某支股票第i天的价格。在每一天&#xff0c;你可以决定是否购买和/或出售股票。你在任何时候最多只能持有一股股票。你也可以先购买&#xff0c;然后在同一天出售。返回你能获得…...

前端开发调试技巧:如何在Component下选中当前插件并且查看当前插件信息

在react开发项目中&#xff0c;在Component下选中组件&#xff0c;然后在控制台输$r 按回车键即可输出该组件信息。例如 $r.props输出该组件的props参数。例子详情见如下截图...

你是否还迷茫要不要学习Linux?

近几年Linux这个词好像很流行&#xff0c;无论是现实工作中&#xff0c;还是在网络信息中均可以听到或者看到有关Linux相关的内容&#xff0c;可以说Linux无处不在。说到这&#xff0c;有人可能会问了&#xff0c;我对Linux比较感兴趣&#xff0c;但是没有接触过Linux&#xff…...

leetcode(1)链表

# 1. 定义一个链表节点 class ListNode:def __init__(self, val0, next_nodeNone):self.val valself.next_node next_node# 2. 定义一个 node头节点 class LinkedList:def __init__(self):self.head None# 3.链表查找元素 get(index)&#xff1a; def get_node(self, index)…...

spring boot Rabbit高级教程

消息可靠性 生产者重试机制 首先第一种情况&#xff0c;就是生产者发送消息时&#xff0c;出现了网络故障&#xff0c;导致与MQ的连接中断。 为了解决这个问题&#xff0c;SpringAMQP提供的消息发送时的重试机制。即&#xff1a;当RabbitTemplate与MQ连接超时后&#xff0c;…...

FTP的魅力:构建高效的文件传输基础

1 ftp介绍 1.1 ftp服务器安装 dnf install vsftpd-3.0.3-31.el8.x86_64 -y # 安装ftp服务 systemctl enable --now vsftpd # 启动ftp服务 systemctl stop --now firewalld.service # 关闭防火墙&#xff0c;允许客户端访问anonymous_enableYES #启动匿名用户访问功能1.2 客户…...

70、window11+visual studio2019+共享内存进行数据传输

基本思想:服务端和客户端 写共享内存 #include <windows.h> #include <iostream> using namespace std;HANDLE g_EventRead; // 读信号灯 HANDLE g_EventWrite; // 写信号灯 // 定义共享数据class Writer { public:Writer(const int buf_size, const wchar_t…...

SSTI模板注入(flask) 学习总结

文章目录 Flask-jinja2 SSTI 一般利用姿势SSTI 中常用的魔术方法内建函数 利用 SSTI 读取文件Python 2Python 3 利用 SSTI 执行命令寻找内建函数 eval 执行命令寻找 os 模块执行命令寻找 popen 函数执行命令寻找 importlib 类执行命令寻找 linecache 函数执行命令寻找 subproce…...

最近的工作和生活

大家好&#xff0c;我是记得诚。 聊一聊最近的工作和生活。 不知不觉在管理岗位&#xff0c;快干一年了。技术管理还是比较纯粹&#xff0c;主要还是以解决问题为主&#xff0c;对自己的考验也更大了&#xff0c;要关注更广的技术&#xff0c;也要专注更深的技术细节。 技术…...

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

.Net框架,除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

SQL慢可能是触发了ring buffer

简介 最近在进行 postgresql 性能排查的时候,发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升,且低水位伴随在整个慢 SQL,一直是 buferIO 的等待事件,此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ,但…...

JavaScript 数据类型详解

JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型&#xff08;Primitive&#xff09; 和 对象类型&#xff08;Object&#xff09; 两大类&#xff0c;共 8 种&#xff08;ES11&#xff09;&#xff1a; 一、原始类型&#xff08;7种&#xff09; 1. undefined 定…...