h函数的三个参数

第一个参数是必须的。
类型:{String | Object | Function}
一个 HTML 标签名、一个组件、一个异步组件、或一个函数式组件。
是要渲染的html标签。
第一个参数div 是表示创建一个div的元素 第二个参数是可选的。
类型:{Object} 主要是当前html中的各种属性。
如attrs,class,style等
在开发时。建议传,实在没有传的时候,传入 null 第三个参数可选的。
类型:{String | Array | Object} children
虚拟子节点(vnodes),当前html标签的元素。

如何在render函数中循环,实现以下代码

    <ul>
<li>青椒炒肉丝 </li>
<li>西红柿炒肉丝 </li>
<li>蘑菇炒肉丝 </li>
</ul>

在render中实现循环

export default{
data(){
return{
isRed:true,
arr:["青椒炒肉丝","西红柿炒肉丝","蘑菇炒肉丝"],
inputValue:""
}
},
// h 最终创建的是一个元素
// 第一个参数div 是表示创建一个div区域的元素
// 第二个参数class表示的是这个div上有一个属性
// 第三个参数可以是数组,表示div元素下的子元素
render(h){
return h('ul',
// 第三个参数
this.arr.map(item=>h("li",item))
); }
}



vue如何在render函数中循环(3)的更多相关文章

  1. 使用React.Fragment替代render函数中div的包裹

    1.在 React 中,render 函数中 return 的内容只能有一个根节点,如果多个元素嵌套,需要用一个标签元素包裹 这个包裹的标签通常用 div,示例如下: class App extend ...

  2. vue 2.0 scopedSlots和slots在render函数中的应用示例

    渲染内容为: hello from functional render scopedSlots render scopedSlots named slot of render hello from f ...

  3. Vue.js之render函数基础

    刚才翻了一下博客,才发现,距离自己写的第一篇Vue的博客vue.js之绑定class和style(2016-10-30)已经过去一年零两天.这一年里,自己从船厂的普通技术员,成为了一个微型不靠谱创业公 ...

  4. 在vue项目中,解决如何在element表格中循环出图片列!

    效果图: 1,vue项目环境 2,引入element-ui组件 3,制作表格 此处省去制作循环表格数据那步,想看的可以找回我的博客:element中的表格处理:循环出表格数据 今天想在表格出循环出一列 ...

  5. R语言:多个因变量时,如何在plot函数中画多条曲线(plot,points,lines,legend函数)

    最近阅读一篇文献<Regional and individual variations in the function of the human eccrine sweat gland>, ...

  6. 如何在sprintf函数中输出百分号(%)等特殊符号

    php中的sprinf可以格式化字符串的数据类型.今天遇到了想在其中输出%,可难倒我了. $query =  sprintf("select * from books where %s li ...

  7. vue 如何实现在函数中触发路由跳转

    this.$router.push({path:'/index'}) 欢迎加入前端交流群交流知识&&获取视频资料:749539640 methods:{ click(){ if(dat ...

  8. vue render函数

    基础 vue推荐在绝大多数情况下使用template来创建你的html.然而在一些场景中,你真的需要javascript的完全编程能力.这就是render函数.它比template更接近编译器 < ...

  9. 大白话Vue源码系列(03):生成render函数

    阅读目录 优化 AST 生成 render 函数 小结 本来以为 Vue 的编译器模块比较好欺负,结果发现并没有那么简单.每一种语法指令都要考虑到,处理起来相当复杂.上篇已经生成了 AST,本篇依然对 ...

  10. 大白话Vue源码系列(04):生成render函数

    阅读目录 优化 AST 生成 render 函数 小结 本来以为 Vue 的编译器模块比较好欺负,结果发现并没有那么简单.每一种语法指令都要考虑到,处理起来相当复杂.上篇已经生成了 AST,本篇依然对 ...

随机推荐

  1. Spark 覆盖写Hive分区表,只覆盖部分对应分区

    要求Spark版本2.3以上,亲测2.2无效 配置 config("spark.sql.sources.partitionOverwriteMode","dynamic& ...

  2. 【活动预告】数据集成引擎BitSail遇上CDC

    BitSail是字节跳动开源数据集成引擎,于2022年10月26日宣布开源,可支持多种异构数据源间的数据同步,并提供离线.实时.全量.增量场景下全域数据集成解决方案.BitSail支撑了字节内部众多的 ...

  3. SecureCRT 取消右击粘贴功能

    SecureCRT 默认是选择复制.右击粘贴 但右击粘贴这个功能实在是太方便了,有时候会造成不必要的麻烦.所以一般情况下我是取消这个应用的 设置如下图所示,把勾取消就OK了

  4. byte[] 数组,创建的时候赋初始值

    C# //创建一个长度为10的byte数组,并且其中每个byte的值为0x08. byte[] myByteArray = Enumerable.Repeat((byte)0x08, 10).ToAr ...

  5. 系统学Prompt,强烈推荐这3个教程,OpenAI还是最强

    系统学Prompt,强烈推荐这3个教程 OpenAI官方Prompt教程 这是最权威.最详细.最值得深入学习的提示词工程学习教程! 教程地址:https://platform.openai.com/d ...

  6. c#-微软2

    练习-编写第一个代码: 在第一次练习中你将使用c#将神圣的程序员用语打印到控制台的标准输出 编写第一行代码: 在软件开发者中,有这么一个传统,那就是将"Hello World!"这 ...

  7. WSL2 配置 ArchLinux 初始化环境

    这篇文章针对的是在 Win11 系统的 WSL2 下安装 ArchLinux 系统, 网上很多中文教程都是使用 LxRunOffline 去做的,但是实际上该方法已经过时了,目前有更加先进的ArchW ...

  8. HDU-3032--Nim or not Nim?(博弈+SG打表)

    题目分析: 这是一个经典的Multi-SG游戏的问题. 相较于普通的Nim游戏,该游戏仅仅是多了拆成两堆这样的一个状态.即多了一个SG(x+y)的过程. 而根据SG定理,SG(x+y)这个游戏的结果可 ...

  9. windows 系统关闭占用端口的应用

    开发中有时候开发工具把程序关闭了,但是后台并没有真正关闭程序,导致再次启动相同端口的程序时报端口已经被使用的错误,这时如何强制关闭已占用的端口 1.打开dos对话框 2.查找被占用的端口的进程号 ne ...

  10. WebGPU光追引擎基础课:使用WebGPU绘制三角形

    大家好~我开设了"WebGPU光追引擎基础课"的线上课程,从0开始,在课上带领大家现场写代码,使用WebGPU开发基础的光线追踪引擎 课程重点在于基于GPU并行计算,实现BVH构建 ...