vue如何在render函数中循环(3)
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)的更多相关文章
- 使用React.Fragment替代render函数中div的包裹
1.在 React 中,render 函数中 return 的内容只能有一个根节点,如果多个元素嵌套,需要用一个标签元素包裹 这个包裹的标签通常用 div,示例如下: class App extend ...
- vue 2.0 scopedSlots和slots在render函数中的应用示例
渲染内容为: hello from functional render scopedSlots render scopedSlots named slot of render hello from f ...
- Vue.js之render函数基础
刚才翻了一下博客,才发现,距离自己写的第一篇Vue的博客vue.js之绑定class和style(2016-10-30)已经过去一年零两天.这一年里,自己从船厂的普通技术员,成为了一个微型不靠谱创业公 ...
- 在vue项目中,解决如何在element表格中循环出图片列!
效果图: 1,vue项目环境 2,引入element-ui组件 3,制作表格 此处省去制作循环表格数据那步,想看的可以找回我的博客:element中的表格处理:循环出表格数据 今天想在表格出循环出一列 ...
- R语言:多个因变量时,如何在plot函数中画多条曲线(plot,points,lines,legend函数)
最近阅读一篇文献<Regional and individual variations in the function of the human eccrine sweat gland>, ...
- 如何在sprintf函数中输出百分号(%)等特殊符号
php中的sprinf可以格式化字符串的数据类型.今天遇到了想在其中输出%,可难倒我了. $query = sprintf("select * from books where %s li ...
- vue 如何实现在函数中触发路由跳转
this.$router.push({path:'/index'}) 欢迎加入前端交流群交流知识&&获取视频资料:749539640 methods:{ click(){ if(dat ...
- vue render函数
基础 vue推荐在绝大多数情况下使用template来创建你的html.然而在一些场景中,你真的需要javascript的完全编程能力.这就是render函数.它比template更接近编译器 < ...
- 大白话Vue源码系列(03):生成render函数
阅读目录 优化 AST 生成 render 函数 小结 本来以为 Vue 的编译器模块比较好欺负,结果发现并没有那么简单.每一种语法指令都要考虑到,处理起来相当复杂.上篇已经生成了 AST,本篇依然对 ...
- 大白话Vue源码系列(04):生成render函数
阅读目录 优化 AST 生成 render 函数 小结 本来以为 Vue 的编译器模块比较好欺负,结果发现并没有那么简单.每一种语法指令都要考虑到,处理起来相当复杂.上篇已经生成了 AST,本篇依然对 ...
随机推荐
- 数据智能——DTCC2022!中国数据库技术大会即将开幕
关注DTCC有几年了,还是在当中学到了很多的干货.今年我的大部分时间也都是投入在了数据治理的学习和数据治理工具的调研中.也非常渴望有这种机会去了解一下国内顶尖公司这方面的前沿技术与应用. DTCC ...
- 火山引擎工具技术分享:用 AI 完成数据挖掘,零门槛完成 SQL 撰写
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,并进入官方交流群 文 / DataWind 团队封声 在使用 BI 工具的时候,经常遇到的问题是:"不会 SQL 怎么生产加工 ...
- Solon 开发调试时能热更新吗?
1.调试模式 开启"调试模式"后,支持动态模板文件.静态资源文件可以实现动态更新.增加启动参数即可开启: --debug=1 使用 solon-test 进行单元测试时,会自动添加 ...
- 【django-vue】celery延迟任务、定时任务 django中使用celery 秒杀功能 双写一致性 首页轮播图定时更新 课程前端页面
目录 上节回顾 字符编码 django-redis 今日内容 1 celery 执行异步任务,延迟任务,定时任务 延时任务 定时任务 2 django中使用celery 2.1 秒杀功能 2.1.1 ...
- Spring 学习笔记(5)AOP
本文介绍 Spring 中 AOP 的原理及使用方式. Spring AOP 简介 如果说 IoC 是 Spring 的核心,那么面向切面编程就是 Spring 最为重要的功能之一了,在数据库事务中切 ...
- 洛谷P2678:跳石头(贪心 + 二分)
题目背景 一年一度的"跳石头"比赛又要开始了! 题目描述 这项比赛将在一条笔直的河道中进行,河道中分布着一些巨大岩石.组委会已经选择好了两块岩石作为比赛起点和终点.在起点和终点之间 ...
- 20级训练赛Round #5
A - 凯少与素数 签到 & 思维题, 要使每一对数字 \((i,j)\) 的最大公约数都等于 1,简单来说区间相邻的两个数一定 \(gcd(i,j) = 1\) 并且 \((r - l)\) ...
- 利用PE工具箱安装WINDOWS系统
一. 进入PE系统 U盘插入电脑,开机多次按F12(联想F12,华硕ESC,DELL F9,微星F11,大部分都是这样,实在不行就按F2进BIOS改)键进入类似如下图界面,选择U盘启动,(能选UE ...
- NSSCTF Round#13 web专项
rank:3 flask?jwt? 简单的注册个账号,在/changePassword 下查看页面源代码发现密钥<!-- secretkey: th3f1askisfunny --> ,很 ...
- <vue 路由 6、动态路由-方法传递参数>
一.query效果 点击query按钮 二.param效果 点击param按钮 注意点 1:重新刷新浏览器后,参数都不在了. 2:url中能看不到传递的参数 3.分别用{{$route. params ...