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,本篇依然对 ...
随机推荐
- 带你了解NB-IoT标准演进
摘要:本文将带大家详细了解NB-IoT标准演进与产业发展. 本文分享自华为云社区<一文带你了解NB-IoT标准演进与产业发展>,作者:万万万. 我们都知道,物联网的场景和手机.电脑在使用的 ...
- 为提高 SDLC 安全,GitHub 发布新功能|GitHub Universe 2022
GitHub Universe 2022于上周举办.在此次大会上,Github 公布了开源软件状态的最新报告,报告中的统计数据显示,90% 的公司都在使用开源,现在 GitHub 上有9400万用户, ...
- Kubernetes(K8S) Deployment 升级和回滚
创建部署详见 Kubernetes(K8S) Deployment 部署 Pod 传统应用升级,一般是V1.0的jar包,有一个应对 1.0 的 shell 启动脚本.升级时,传 2.0 的 jar包 ...
- MongoDB 读写分离——Windows MongoDB 副本集配置
本文基于:MongoDB 读写分离--MongoDB 安装 参考:https://docs.mongodb.com/manual/tutorial/deploy-replica-set-for-tes ...
- 【JAVA基础】错误捕获try-catch
错误捕获try-catch 使用BaseController统一管理 项目结构 UserController package com.cy.store.controller; import com.c ...
- Spark 数据倾斜及其解决方案
本文首发于 vivo互联网技术 微信公众号 https://mp.weixin.qq.com/s/lqMu6lfk-Ny1ZHYruEeBdA 作者简介:郑志彬,毕业于华南理工大学计算机科学与技术(双 ...
- 你有一份Rx编程秘籍请签收
一.背景 在学习Rx编程的过程中,理解Observable这个概念至关重要,常规学习过程中,通常需要进行多次"碰壁"才能逐渐"开悟".这个有点像小时候学骑自行车 ...
- ldap sssd授权linux登录
业务系统越来越多,服务器也越来越多,本文主要是给企业用户减少账号密码管理难度的. 目的:使用ldap统一管理账号密码,实现单点登录linux. 一点废话,网上找了很多文章,看得云里雾里,搞了几天算是搞 ...
- java编译期和运行期和string原理
编译期: 是指把源码交给编译器编译成计算机可以执行的文件的过程.在Java中也就是把Java代码编成class文件的过程.编译期只是做了一些翻译功能,并没有把代码放在内存中运行起来,而只是把代码 ...
- ios ipa包上传需要什么工具
目录 ios ipa包上传需要什么工具 前言 一.IPA包的原理 二.IPA包上传的步骤 1.注册开发者账号 2.apk软件制作工具创建应用程序 3.构建应用程序 4.生成证书和配置文件 5.打包 ...