antdesignvue中使用VNode写法

news2025/1/11 15:04:08

1、使用场景
在这里插入图片描述
如图:消息提示框中,将数据中的数据单独一行显示
2、代码

 let errorList = res.result; //后端返回的数据例: ["1. 数据格式不正确","2. 数据已存在"]
    if(errorList&&errorList.length!=0){
      this.$notification.open({
        message: "数据有误!",
        duration:0,  //取消定时关闭效果
        description: h=>{
        let arr = [];
        errorList.forEach((item)=>{
          arr.push(h('p',null,item)) 
        })
        return h('div',null,arr)
       }
      })
   }

3、h函数使用(vue2x)
h(标签元素,标签属性,标签下的子元素)

一、attrs:设置html属性例如:id
1、h('div',{id:"divObj"},"hello world")
==
<div id="divObj">hello world</div>

2、h('div',null,"hello word")
==
<div>hello world</div>
3、h('div',null,[h('span',null,'1.张三'),h('span',null,'2.李四')]
==
<div>
	<span>1.张三</span>
	<span>2.李四</span>
</div>

二、props:设置DOM节点例如value
1、h('input',{type:"text",value:"hello"},null)
==
<input type="text" value="hello"/>

三、classDOM类名
1、h('div',{class:'iconCss'},'hello')
==
<div class="iconCss">hello</div>

四、style
1、h('div',{style:'color:red'},'hello')
==
<div style="color:red">hello</div>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1411954.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

时限挑战 —— 深度解析Pytest插件 pytest-timeout!

在软件开发中&#xff0c;测试用例的执行时间通常是一个关键考虑因素。Pytest插件 pytest-timeout 提供了一个强大的插件&#xff0c;允许你设置测试用例的超时时间。本文将深入介绍 pytest-timeout 插件的基本用法和实际案例&#xff0c;助你精确掌控测试用例的执行时限。 什么…

备忘录模式-C#实现

该实例基于WPF实现&#xff0c;直接上代码&#xff0c;下面为三层架构的代码。 目录 一 Model 二 View 三 ViewModel 一 Model using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;namespace 设计模式练…

JVM篇----第八篇

系列文章目录 文章目录 系列文章目录前言一、标记清除算法( Mark-Sweep)二、复制算法(copying)三、标记整理算法(Mark-Compact)前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分…

Docker应用-自定义网络连接

Docker网络 文章目录 Docker网络网络的基础配置自定义网络网络连通 网络的基础配置 大量的互联网应用服务包括多个服务组件&#xff0c;这往往需要多个容器之间通过网络通信进行互相配合。 目前Docker提供了映射容器端口到宿主机主机和容器互联机制来为容器提供网络服务&…

【MySQL】如何使用图形化界面DataGrip操作数据库

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-W5JDg0WA1tjEP66Y {font-family:"trebuchet ms",verdana,arial,sans-serif;font-siz…

小白水平理解面试经典题目LeetCode 594 Longest Harmonious Subsequence(最大和谐字符串)

594 最大和谐字符串 这道题属于字符串类型题目&#xff0c;解决的办法还是有很多的&#xff0c;暴力算法&#xff0c;二分法&#xff0c;双指针等等。 题目描述 和谐数组是指一个数组里元素的最大值和最小值之间的差别 正好是 1 。 现在&#xff0c;给你一个整数数组 nums …

java servlet 高校田径运动会管理系统Myeclipse开发mysql数据库web结构jsp编程计算机网页项目

一、源码特点 jsp高校田径运动会管理系统是一套完善的java web信息管理系统 采用mvc模式 servletdaobean 模式开发&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为TOMCAT7.0,Myecl…

Redis 线程模型

更多内容&#xff0c;前往个人博客 一、概述 【1】Redis 是基于 Reactor 模式开发的网络事件处理器&#xff1a;这个处理器被称为文件事件处理器&#xff08;file event handler&#xff09;&#xff0c;这个文件事件处理器是单线程的&#xff0c;所以 Redis 才叫做单线程的模型…

全志XR806芯片Wi-Fi测试:自定义发送802.11帧(Beacon篇)

XR806是一款使用ARMv8-M的Wi-Fi BLE Combo MCU。本文使用XR806开发板以及基于FreeRTOS的XR806 SDK实现了自定义发送802.11 Beacon帧&#xff0c;并进行了无线抓包分析以及扫描测试来验证帧的发送结果。 环境配置过程 环境搭建可以参考官方文档开发环境搭建。本测试中使用的开…

微信小程序登录获取手机号教程(超详细)

1. 背景介绍&#xff1a; 在我们开发微信小程序时&#xff0c;登录时&#xff0c;需要获取用户手机号作为唯一标识&#xff0c;下面我介绍一下获取手机号的教程。 本篇文章介绍后端获取方法&#xff1a; 前端工作 后端工作 前端 新建Page页面&#xff0c;在xxx.wxml中加入…

What is Rust? Why Rust?

why Rust&#xff1f; 目前&#xff0c;Rust 变得越来越流行。然而&#xff0c;仍然有很多人&#xff08;和公司&#xff01;&#xff09;误解了 Rust 的主张价值是什么&#xff0c;甚至误解了它是什么。在本文中&#xff0c;我们将讨论 Rust 是什么以及为什么它是一种可以增强…

<网络安全>《2 国内主要企业网络安全公司概览(二)》

4 北京天融信科技有限公司(简称天融信) 信息内容LOGO成立日期创始于1995年总部北京市海淀区上地东路1号院3号楼北侧301室背景民营企业是否上市天融信[002212]A股市值99亿主要产品网络安全大数据云服务员工规模6000多人简介天融信科技集团&#xff08;证券代码&#xff1a;0022…

A JSONArray text must start with at 1

A JSONArray text must start with at 1 [character 2 line 1] 起因&#xff1a;String数组转 JSON 后端调用出错 JSONUtil.toList(xx.getTags(), String.class) 数据库对象entity转包装类 方法 &#xff0c;其中数据库字段tags是String类型&#xff0c;在包装类中想转换为 J…

【idea】idea中编译内存不足(java: java.lang.0ut0fMemoryError: Java heap space)的解决方法

问题 在编译一个较大的idea项目时候&#xff0c;有时候会显示内存不足&#xff0c;导致项目编译失败 原因 编译项目时实际也是启动了jvm进行的&#xff0c;所以需要分配对应的内存大小。 这个大小在idea中有一个默认的配置&#xff0c;大小是700M。 对于一个大型的项目这个大…

大数据Doris(五十九):SQL函数之字符串函数(三)

文章目录 SQL函数之字符串函数(三) 一、​​​​​​​NULL_OR_EMPTY (VARCHAR str)

Redis 高可用之集群

1、简介 在之前的文章里&#xff0c;通过主从复制和哨兵机制实现Redis 高可用架构&#xff0c;但是由于架构比较复杂&#xff0c;难以维护&#xff0c;引入集群架构模式&#xff0c;一个集群可以有多个 master &#xff0c;一个master 可以有多个slave&#xff0c;集群支持故障…

Unity制作右键菜单(自适应分辨率)

一、需求 右键触发打开菜单&#xff0c;左键在内部可选择选项&#xff0c;左键单击菜单范围外关闭。难点在于屏幕坐标系&#xff0c;鼠标位置&#xff0c;UI位置之间的关系。 二、理论 前置知识&#xff1a; unity中&#xff0c;用RectTransform对象的position.x和position.y表…

nginx详细资料

nginx简介 1、nginx产生 Nginx同Apache一样都是Web服务器。基于REST架构风格&#xff0c;以统一资源描述符(Uniform Resources Identifier ) URI或者统一资源定位符&#xff08;Uniform Resources Locator&#xff09;URL作为沟通一句&#xff0c;通过HTTP协议提供各种网络服务…

Vue自定义成功弹窗H5实现类似于小程序的效果

效果图: <div class="father"><div class="success-box" v-if="isSuccess"><img src="../../assets/insure/success-logo.png" alt=""><span>{{ successTitle }}</span></div> </d…

单片机之keil软件环境搭建

简介 Keil提供了包括C编译器、宏汇编、链接器、库管理和一个功能强大的仿真调试器等在内的完整开发方案&#xff0c;通过一个集成开发环境&#xff08;μVision&#xff09;将这些部分组合在一起。     目前软件对中文的支持不友好&#xff0c;不建议安装网上的一些汉化包…