vue-编写简单的render函数

本文主要是介绍vue-编写简单的render函数，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
<div id="app">
  <example :tags="['h1','h2','h3']"></example>
</div>
<script>
  Vue.component("example", {
    props: ["tags"],
    render: function (h) {
      //   const children = this.tags.map((tag, i) => h(tag, i));
      //   return h("div", children);
      return h("div",{ attrs: { id: "hello" } },this.tags.map((tag, i) => h(tag, i))
      );
    },
  });
  new Vue({ el: "#app" });
</script>

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
<div id="app">
  <example :ok="ok"></example>
  <button @click="ok = !ok">toggle</button>
</div>
<script>
  const Foo = {
    render: (h) => h("div", "foo"),
  };
  const Bar = {
    render: (h) => h("div", "bar"),
  };
  Vue.component("example", {
    props: ["ok"],
    render: function (h) {
      return this.ok ? h(Foo) : h(Bar);
    },
  });
  new Vue({ el: "#app", data: { ok: true } });
</script>

这篇关于vue-编写简单的render函数的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！