首页 > 编程知识 正文

render函数的用法,render()方法

时间:2023-05-03 20:35:36 阅读:201039 作者:1151

1、官方文档地址:

https://cn.vuejs.org/v2/guide/render-function.html

2、简单理解

使用js生成需要的响应式的html代码

3、简单demo

header组件

引用:

输出:

解释:

网页出现的header标签就是header组件中,使用render函数的createElement方法创建的。

4、render函数中使用v-model

render组件

 引用:

效果:

解释:

domProps指向的input标签,domProps.value指的就是输入框的值

on.input指的是输入框输入方法,输入时,通过change方法将输入的值抛出去

5、render函数中使用el-input组件

render组件

 引用:

效果:

解释:

el-input的value是属性,不是内容,要将value放在attrs中

el-input的input方法,返回的是值,不是事件本身,所以不能用e.target.value

6、render函数中循环使用自定义组件

render组件

 引用:

效果:

解释:

forms中,label是描述,el是要创建的标签,key对应form表单中的下标。

这样写的话,即使有很多个表单组件,也只用在forms中显示出来就好了。

render函数可以完成所有html的书写,不过为了方便不这么用。如果遇到类似这种代码相似度很高的,大量的标签,用render函数会非常有用。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。