vue如何在render函数中循环(3)
2023-09-27 14:22:20 时间
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】基本结构
- 【Vue】Vue组件中事件和方法的混合(mixin)应用(图文+代码示例)
- 【Vue】监视(侦测)属性Watch用法的完整示例代码
- Vue - v-for 循环渲染多个 “重复“ 子组件(仅 ref 不同,this.$refs.xx 使用时依然能准确找到子组件)将子组件 ref 设为动态,这样每个子组件都是 “独立“ 的!详细教程
- Vue - 函数的参数传递自身 DOM 对象(标签绑定的函数)
- JavaScript - math.js 数学库,实现 math.add() “数字累加“ 计算总和的操作(例如:循环 N 个整数或小数,然后再循环内 “+=“ 叠加算数)适用于Vue等全部前端项目
- vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础
- Vue绑定事件,双向数据绑定,只是循环没那么简单
- 初学者可能不知道的vue技巧
- vue router动态路由与路由的匹配
- 【转发】vue v-for循环的用法(索引,键值)
- 场景类:vue多个router-view路由嵌套
- Vue打开新页面的方法
- Vue之双向数据绑定
- vue前台十(1)
- 前端技术:vue(计算属性+监视)
- SSM项目/SpringBoot项目/SpringBoot+Vue前后端分离项目 图片上传并查看功能实现汇总
- Django+Vue项目学习第九篇:vue项目部署到服务器
- vue项目打包后字体文件路径出错的解决办法
- Vue.js 条件与循环
- Vue for循环 例子
- vue造轮子,封装组件库-主要前置知识与总结
- vue 实现表格循环滚动 vue-seamless-scroll插件的安装与使用