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

vue3版本学习

1,响应式ref或者reactive

const  aa = ref('hello')
const bb = reactive({
    aa: 'hello',
    ss: 'workd'
})

2,计算属性

响应式属性经过计算得到的值(ref),放到模板中,只会随着响应式author.books属性变化而变化

const  autor = ref(['john'])

const  getBook = computed(()=>{
return author.length?"yes":"no"
})

如果不用computed包裹,也会随着响应式属性变化而变化,但是不只是author.books属性

修改计算属性:
const getBook = computed(()=>{
 get(){
   return autor
}
set(val){ author.value= val}
})

3,类和样式绑定

即:动态修改class属性值

<div :class="{action: true}"></div>

相当于:<div class="action"></div>

可以绑定数组

const actionclass= ref('action')
<div :class="[actionclass]"></div>

动态绑定样式:
<div :style="{ fontSize: large}"></div>

4,类和样式绑定之父子组件class传递

只有一个根元素:
Component :<p></p>
<Component class="good" />
相当于:<p class="good"></p>

有多个根元素:
Component: 
  <p></p>
<div :class="$attrs.class" ></div>

<Component class="good" />
相当于:
 <p></p>
<div  class="good" ></div>

5,条件渲染v-if和v-show

<div v-if = "show" >看见我了!</div>
<div v-else>看不见了!</div>

v-show和v-if一样,不过v-show元素还是存在文档中,只是display:none

6,v-for

<div v-for="(item,index) in items"  :key={{item.id}}>{{item}}</div>
item可以是数组、对象,数字

7,v-model
<input v-model="text" />

相当于:
<input :value="text"  @input="event=>text=e.target.val" >

相关文章:

vue3版本学习

1&#xff0c;响应式ref或者reactive const aa ref(hello) const bb reactive({ aa: hello, ss: workd }) 2&#xff0c;计算属性 响应式属性经过计算得到的值(ref)&#xff0c;放到模板中&#xff0c;只会随着响应式author.books属性变化而变化 const autor …...

【WPF.NET开发】创建简单WPF应用

本文内容 先决条件什么是 WPF&#xff1f;配置 IDE创建项目设计用户界面 (UI)调试并测试应用程序 通过本文你将熟悉在使用 Visual Studio 开发应用程序时可使用的许多工具、对话框和设计器。 你将创建“Hello, World”应用程序、设计 UI、添加代码并调试错误。在此期间&#…...

视频智能分析国标GB28181云平台EasyCVR加密机授权异常是什么原因?

国标GB28181视频汇聚/视频云存储/集中存储/视频监控管理平台EasyCVR能在复杂的网络环境中&#xff0c;将分散的各类视频资源进行统一汇聚、整合、集中管理&#xff0c;实现视频资源的鉴权管理、按需调阅、全网分发、云存储、智能分析等。 近期有用户选择使用加密机进行EasyCVR授…...

Mysql安全之基础合规配置

一、背景 某次某平台进行安全性符合型评估时&#xff0c;列出了数据库相关安全选项&#xff0c;本文特对此记录&#xff0c;以供备忘参考。 二、安全配置 2.1、数据库系统登录时的用户进行身份标识和鉴别&#xff1b; 1&#xff09;对登录Mysql系统用户的密码复杂度是否有要…...

前后端分离项目跨域请求

一、前端vue项目 在项目中创建request.js文件&#xff0c;添加以下内容 import axios from "axios"; const api axios.create({ //这里配置的是后端服务提供的接口baseURL: "http://localhost:8080/web-demo",timeout: 1000} ); export default api; …...

OpenEuler系统桌面终端设置字体

初始界面 终端的字体间距过大&#xff0c;阅读起来不方便。 调整终端字体 点击菜单&#xff0c;选择“配置文件首选项” 未命名 ---- 文本---- 勾选 自定义字体 ---- 选择 "DejaVu LGC Sans Mono"字体 你也可以根据自己的喜好&#xff0c;选择其他字体。 修改好了…...

repo常用命令解析(持续更新)

1 同步 1.1 将本地仓库更新到最新状态。它会从远程服务器下载最新的代码&#xff0c;并将本地仓库与之同步。如果本地仓库中已经存在某个项目&#xff0c;repo sync会自动检测本地仓库中该项目的版本&#xff0c;并将其更新到最新状态。 类似于git fetch和git merge命令组合使…...

关于小红书商单变现的一些答疑

AI小红书商单训练营也过去1个月了&#xff0c;今天给大家汇总几个常遇到的问题&#xff0c;希望对大家在运营过程中有所帮助。 1.账号封面是否要统一模版&#xff1f; 为了让账号主页呈现整洁美观的效果&#xff0c;建议统一封面设计&#xff0c;视频开头可以设置一个固定画面…...

使用 Kubernetes Agent Server 实现 GitOps

目录 温习 GitOps 极狐GitLab Kubernetes Agent 极狐GitLab GitOps workflow 极狐GitLab KAS 的配置 创建极狐GitLab agent 创建 agent token Kubernetes 上安装 agent&#xff08;agentk&#xff09; 极狐GitLab GitOps workflow 实践 写在最后 温习 GitOps GitOps …...

Day12 qt QMianWindow,资源文件,对话框,布局方式,常用ui控件

QMianWindow 概述 QMainWindow 是一个为用户提供主窗口程序的类&#xff0c;包含一个菜单栏&#xff08; menu bar &#xff09;、多 个工具栏 (tool bars) 、多个铆接部件 (dock widgets) 、一个状态栏 (status bar) 及 一个中心部件 (central widget) 许多应用程序的基础…...

Python实现广义线性回归模型(statsmodels GLM算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 广义线性模型(Generalized Linear Model&#xff0c;简称GLM)是一种广泛应用于回归分析和分类问题的统…...

GNSEC 2022年第8届全球下一代软件工程线上峰会-核心PPT资料下载

一、峰会简介 新一代软件工程是指利用新的理论、方法和技术&#xff0c;在软件开发、部署、运维等过程中&#xff0c;实现软件的可控、可预测、可维护的软件生产方式。它涵盖了多个领域&#xff0c;如软件开发、测试、部署、运维等&#xff0c;旨在提高软件生产效率和质量。 …...

nVisual能为数据中心解决什么问题?

nVisual通过可视化的管理方式&#xff0c;使数据中心管理者能够有效且高效地管理数据中心的资产、线缆、容量、变更&#xff1b;使数据中心管理者能够获得如下问题的答案&#xff0c;以便能够快速做出更好、更明智的决策&#xff1a; 1&#xff0e;资产管理 我们有什么&#x…...

Android--Jetpack--Databinding详解

不经一番寒彻骨&#xff0c;怎得梅花扑鼻香 一&#xff0c;定义 DataBinding, 又名数据绑定&#xff0c;是Android开发中非常重要的基础技术&#xff0c;它可以将UI组件和数据模型连接起来&#xff0c;使得在数据模型发生变化时&#xff0c;UI组件自动更新。是 MVVM 模式在 An…...

Node.js入门指南(完结)

目录 接口 介绍 RESTful json-server 接口测试工具 会话控制 介绍 cookie session token 上一篇文章我们介绍了MongoDB&#xff0c;这一篇文章是Node.js入门指南的最后一篇啦&#xff01;主要介绍接口以及会话控制。 接口 介绍 接口是前后端通信的桥梁 &#xff0…...

MySQL和Java通用加密解密方式

加密方式使用 AES 加密&#xff0c;再转成 Base64。 SQL -- 加密 update your_table set your_columnto_base64(aes_encrypt(your_column, "password"));-- 解密 select aes_decrypt(from_base64(your_column) ,"password") from your_table; 使用原生 …...

若依前端APP版使用教程

1 增加页面流程 新增Page>新增API>新增组件>新增样式>新增路径(page.json) {"path": "pages/mes/pro/feedback/index","style": {"navigationBarTitleText": "工单报工"}} <template><view class&quo…...

2023 年工程师不可错过的 AI 主要发展趋势

从对未来的好奇到关键的企业工具&#xff0c;人工智能的发展证明了它对工程师的价值。不久前&#xff0c;Gartner 预测&#xff0c;采用人工智能工程实践来构建和管理自适应人工智能系统的企业&#xff0c;在实施人工智能模型方面的表现将优于同行至少 25%&#xff0c;这为各组…...

记录 | 安装地平线工具链install_ai_toolchain.sh出现cython版本问题报错解决

安装地平线工具链 install_ai_toolchain.sh&#xff1a; cd ddk/package/host/ai_toolchain bash install_ai_toolchain.sh出现报错&#xff1a; Requirement already satisfied: packaging>20.0 in /root/.local/lib/python3.8/site-packages (from matplotlib>2.1.0-…...

Java8流操作

Java8流操作 1. 双层Map一层List 1. 双层Map一层List 代码片 // 开始分组Map<String, Map<Object, List<ProjectGeographyVO>>> collect4 vos.stream()// 注释了下行没用市级项目,只有区// .filter(data -> String.valueOf(data.getCode()).length() …...

500套帐篷发往西非:我们凭什么拿下这单?

一句吐槽&#xff0c;让我们抓住了机会年初&#xff0c;天津京路发科技收到一封西非询盘&#xff1a;500套支架帐篷&#xff0c;用于安置点。客户顺带吐槽了一句&#xff1a;“之前的帐篷&#xff0c;没撑过上一个雨季。”我们懂了——价格不是关键&#xff0c;耐造才是。先看气…...

IQR四分位数法是什么?

一、核心概念&#xff1a;四分位数与IQR1. 四分位数&#xff08;Quartiles&#xff09;将一组有序数据&#xff08;从小到大排列&#xff09;划分为4个相等部分的三个关键分割点&#xff0c;分别记为&#xff1a;Q1&#xff08;第一四分位数&#xff0c;25%分位数&#xff09;&…...

DLSS状态监控完全指南:从问题诊断到性能优化

DLSS状态监控完全指南&#xff1a;从问题诊断到性能优化 【免费下载链接】dlss-swapper 项目地址: https://gitcode.com/GitHub_Trending/dl/dlss-swapper 你是否曾经遇到过这样的困惑&#xff1a;在游戏中开启了DLSS功能&#xff0c;却无法确定它是否真的在工作&#…...

Qwen2.5-Coder-1.5B应用案例:自动生成Bash脚本处理日志文件

Qwen2.5-Coder-1.5B应用案例&#xff1a;自动生成Bash脚本处理日志文件 1. 日志处理场景与痛点分析 1.1 运维工程师的日常挑战 在服务器运维工作中&#xff0c;日志分析是最常见也最耗时的任务之一。想象一下这样的场景&#xff1a; 你需要检查10台服务器上50个不同的服务日…...

新手入门福音:用快马AI生成你的第一个Python版游戏账号管理工具

作为一个刚接触Python编程的新手&#xff0c;最近想尝试开发一个简单的游戏账号管理工具。这个需求其实挺常见的&#xff0c;比如我平时玩多个游戏&#xff0c;账号密码经常记混&#xff0c;如果能有个小工具统一管理就方便多了。在朋友的推荐下&#xff0c;我尝试用InsCode(快…...

Scratch飞翔小鸟游戏制作教程:从零开始打造你的第一个像素风小游戏

Scratch飞翔小鸟游戏制作教程&#xff1a;从零开始打造你的第一个像素风小游戏 当孩子们第一次接触编程时&#xff0c;往往会被复杂的代码和抽象的概念吓退。而Scratch就像一扇通往创意世界的大门&#xff0c;用积木式的编程方式让游戏开发变得触手可及。今天&#xff0c;我们将…...

矩阵理论进阶:内积空间与正交变换的深度解析

1. 内积空间&#xff1a;从几何直觉到严格定义 第一次接触内积空间时&#xff0c;很多人会被各种抽象定义搞得晕头转向。其实我们可以从最熟悉的二维平面开始理解——当你计算两个向量的点积时&#xff0c;本质上是在测量它们的"相似程度"。这种几何直觉正是内积空间…...

告别低效:用快马ai一键生成can总线数据分析与统计脚本

在汽车电子和嵌入式系统开发中&#xff0c;CAN总线数据的分析是个高频需求。无论是调试车载网络问题&#xff0c;还是优化通信性能&#xff0c;都离不开对海量CAN帧数据的处理。但手动写解析脚本不仅耗时&#xff0c;还容易遗漏关键细节。最近我发现用InsCode(快马)平台的AI辅助…...

颠覆教育资源获取:3分钟搞定电子课本下载的秘密武器

颠覆教育资源获取&#xff1a;3分钟搞定电子课本下载的秘密武器 【免费下载链接】tchMaterial-parser 国家中小学智慧教育平台 电子课本下载工具&#xff0c;帮助您从智慧教育平台中获取电子课本的 PDF 文件网址并进行下载&#xff0c;让您更方便地获取课本内容。 项目地址: …...

终极Redis可视化工具:Another Redis Desktop Manager完全使用指南

终极Redis可视化工具&#xff1a;Another Redis Desktop Manager完全使用指南 【免费下载链接】AnotherRedisDesktopManager &#x1f680;&#x1f680;&#x1f680;A faster, better and more stable Redis desktop manager [GUI client], compatible with Linux, Windows, …...