export default {
data() {
return {
isRed: true
}
}, /*
* <template>
* <div :class="{'is-red': isRed}">
* <p>这是一个 render 事例</p>
* </div>
* </template>
*/
// render 中的渲染结果与上面等价
render(h) {
return h('div', {
'class': {
'is-red': this.isRed
}
}, [
h('p', '这是一个 render 事例')
])
}
}
render 函数中如何表示指令
Vue 模板具有各种便捷功能，以便向模板添加基本逻辑和绑定功能，如 v-if 、 v-for 、 v-moel 指令等。 在 render 函数中是无法使用这些指令的。 取而代之的是以纯 JS 来实现，对于大多数指令而言，这也是比较简单的。
v-if
v-if 用纯 JS 实现很简单，只需围绕 createElement 调用使用 if(expr) 语句即可。
v-for
v-for 可以使用 for-of ， Array.map ， Array.filter 等的JS方法中的任何一种来实现。我们可以通过非常有趣的方式将它们组合在一起，以实现过滤或状态切片，而无需计算属性。
例如，有以下 Vue 的模板代码
<template>
<ul>
<li v-for="pea of pod"> </li>
</ul>
</template>
可以用下面的 render 函数来实现上面的效果：
render(h) {
return h('ul', this.pod.map(pea => h('li', pea.name)));
}v-model
我们知道， v-model 只是 bind 属性与 value 的语法糖，并在触发 input 事件时设置数据属性。但是，在 render 函数没有这样的简写，我们需要自己实现。
假设，在 Vue 中，我们有如下的结构：
<template>
<input v-model='myBoundProperty'/>
</template>上面代码等价于：
<template>
<input :value="myBoundProperty" @input="myBoundProperty = $event.target.value"/>
</template>在 render 函数中可以用下面方式来实现上面的代码：
render(h) {
return h('input', {
domProps: {
value: this.myBoundProperty
},
on: {
input: e => {
this.myBoundProperty = e.target.value
}
}
})
}v-bind
attribute 和 property 这两种类型的绑定被放在元素定义中，如 arttrs 、 props 和 domProps ( value 和 innerHTML 之类的东西)。
render(h) {
return h('div', {
attrs: {
// <div :id="myCustomId">
