文章目录
Vue 推荐在绝大多数情况下使用 template
来创建你的 HTML
。然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render
函数,它比 template
更接近编译器。
<h1>
<a name="hello-world" href="#hello-world"> Hello world! </a> </h1>
在 HTML 层,我们决定这样定义组件接口:
<anchored-heading :level="1">Hello world!</anchored-heading>
当我们开始写一个通过 level
prop 动态生成 heading 标签的组件,你可能很快想到这样实现:
<script type="text/x-template" id="anchored-heading-template"> <h1 v-if="level === 1"> <slot></slot> </h1> <h2 v-else-if="level === 2"> <slot></slot> </h2> <h3 v-else-if="level === 3"> <slot></slot> </h3> <h4 v-else-if="level === 4"> <slot></slot> </h4> <h5 v-else-if=