VUE 中render 函数 渲染html代码的三种方式
话不多说上代码:<div id="app"><test></test><test2></test2><test3></test3></div>Vue.component('test', {render: function (createElement) {...
话不多说上代码:
<div id="app">
<test></test>
<test2></test2>
<test3></test3>
</div>
-
Vue.component('test', {
render: function (createElement) {
return createElement(
'div',
{},
['<h>你好</em>']
)
},
props: {
level: {
type: Number,
required: true
}
}
}); -
Vue.component('test2', {
render: function (createElement) {
return createElement(
'div',
{},
[createElement('em',{},'你好')]
)
},
props: {
level: {
type: Number,
required: true
}
}
}) -
Vue.component('test3', {
render: function (createElement) {
return createElement(
'div',
{domProps: {
innerHTML: '<em>你好啊</em>'
},},
[]
)
},
props: {
level: {
type: Number,
required: true
}
}
});
new Vue({
el: '#app'
});
三种方式分别输出为:
更多推荐
所有评论(0)