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. 印尼Widya Robotics携手华为云,让建筑工地安全看得见

    摘要:AI落地效率提升30倍,实时智慧安全检测,全天候保障劳工人身安全. 本文分享自华为云社区<云上360行 丨 印尼Widya Robotics携手华为云,让建筑工地安全看得见>,作者: ...

  2. 探索开源工作流引擎Azkaban在MRS中的实践

    摘要:本文主要介绍如何在华为云上从0-1搭建azkaban并指导用户如何提交作业至MRS. 本文分享自华为云社区<开源工作流引擎Azkaban在MRS中的实践>,作者:啊喔YeYe. 环境 ...

  3. appuploader不是开发者账号

    Appuploader是一款可以帮助开发者上传iOS应用到Apple App Store的工具.很多开发者都知道,在上传应用到App Store之前,需要创建开发者账号并获得苹果官方的认证才能进行上传 ...

  4. Solon2 开发之IoC,二、构建一个 Bean 的三种方式

    1.手动 简单的构建: //生成普通的Bean Solon.context().wrapAndPut(UserService.class, new UserServiceImpl()); //生成带注 ...

  5. Docker 删除 images

    1 查看本地已用镜像文件 [root@localhost web]# docker images 2.删除镜像 Redis [root@localhost web]# docker rmi 59589 ...

  6. 敏捷编辑器Sublime text 4中文配置Python3开发运行代码环境

    敏捷编辑器Sublime text 4中文配置Python3开发运行代码环境 首先来到Win11环境下,进入Sublime text 4官网的下载页面:https://www.sublimetext. ...

  7. 数据存入已有Excel

    import openpyxl filepath = r'.\UCB2Create_course\SuccsessCourse.xlsx' wb = openpyxl.load_workbook(fi ...

  8. Printer Queue,UVa 12100 (自定义标记法 + 优先队列)

    题目描述: 我们需要用打印机打印任务.每个任务都有1~9间的优先级,优先级越高,任务越急. 打印机的运作方式:从打印队列里取出一个任务j,如果队列里有比j更急的任务,则直接把j放到打印队列尾部,否则打 ...

  9. Codeforces Round #723 (Div. 2) (A~C题题解)

    补题链接:Here 1526A. Mean Inequality 给定 \(2 * n\) 个整数序列 \(a\),请按下列两个条件输出序列 \(b\) 序列是 \(a\) 序列的重排序 \(b_i ...

  10. 判断客户端是PC还是移动端问题的解决方案

    今天在帮 莲的Live 2D 做浏览器适配的时候学会的一段代码 利用 Javascript 进行判断 function isPC() { //是否为PC端 var userAgentInfo = na ...