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. STM32+华为云IOT制作酒驾监控系统:上车就监控

    摘要:设计一种安装在驾驶室内,能根据具体功能进行鉴别酒精浓度的系统,一起监督行车安全. 本文分享自华为云社区<基于STM32+华为云IOT设计的酒驾监控系统[玩转华为云]>,作者: DS小 ...

  2. 揭秘华为云GaussDB(for Influx):最佳实践之数据建模

    摘要:本期将从GaussDB(for Influx)数据模型谈起,分享GaussDB(for Influx)数据建模的最佳方法,避免一些使用过程中的常见问题. 本文分享自华为云社区<华为云Gau ...

  3. iOS 应用上架的步骤和工具简介

    编辑 APP开发助手是一款能够辅助iOS APP上架到App Store的工具,它解决了iOS APP上架流程繁琐且耗时的问题,帮助跨平台APP开发者顺利将应用上架到苹果应用商店.最重要的是,即使没有 ...

  4. 总结vue3 的一些知识点:MySQL 运算符

    MySQL 运算符 本章节我们主要介绍 MySQL 的运算符及运算符的优先级. MySQL 主要有以下几种运算符: 算术运算符 比较运算符 逻辑运算符 位运算符 算术运算符 MySQL 支持的算术运算 ...

  5. 火山引擎DataTester:跨境电商网站,如何快速实施AB测试 ?

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群   如今中企出海的形态愈加多样,很多企业都建有独立站可直接触达海外客户,但获取优质流量的成本会更加高昂.当优质流量 ...

  6. Solon2 开发之IoC,六、提取 Bean 的函数进行定制开发

    为什么需要提取Bean的函数?绝不是闲得淡疼.比如:控制器的@Mapping:再比如:Xxl-Job的@XxlJob.这些都是要提取Bean的函数并定制加工的. 1.比如提取 @XxlJob 注解的函 ...

  7. .Net Core 跨域

    Startup.cs public void Configure(IApplicationBuilder app, IHostingEnvironment env) { app.UseCorsMidd ...

  8. Gcc内置原子操作__sync_系列函数

    Gcc内置原子操作__sync_系列函数简述及例程 Gcc 4.1.2版本之后,对X86或X86_64支持内置原子操作.就是说,不需要引入第三方库(如pthread)的锁保护,即可对1.2.4.8字节 ...

  9. BOM批量查询

     1业务要求 1.当多层展开时: 根据"BOM应用程序"字段CAPID在TC04中取出"选择ID"TC04-CSLID: 再根据TCS41-CSLID= TC0 ...

  10. 面对科技公司的制裁,俄罗斯放出封印7年的神兽:RuTracker

    大家好,我是DD! 最近俄乌冲突引发的科技公司站队,Oracle.微软.三星等全球知名科技公司都开始对俄罗斯实施制裁与封锁.就连崇尚自由的开源社区GitHub也发文会严格限制俄罗斯获得维持其咄咄逼人的 ...