Vue2.0中h()函数的使用方法
in 前端 with 0 comment

Vue2.0中h()函数的使用方法

in 前端 with 0 comment

最近收到这么一个需求:

在Element后台表格中,某一列需要展示 文本+超链接的内容。

期望得到的格式如下:

<div>
    <span>文本内容</span>
    <a href="自定义跳转链接" target="_blank">查看</a>
</div>

因为封装的列中已经给了h()了(相当于vue的createElement),所以很快写了一段生成方法:

h("div", {}, [
    h("span", "文本内容"),
    h("a", { href: "自定义跳转链接", target: "_blank" }, "查看")
])

结果一看生成的结果:

<div>
    <span>文本内容</span>
    <a>查看</a>
</div>

hreftarget并没有被生成,于是又尝试了下其他属性:

h("div", {}, [
    h("span", "文本内容"),
    h("a", { class: "test" }, "查看")
])
<div>
    <span>文本内容</span>
    <a class="test">查看</a>
</div>

好家伙,咋hreftarget不行呢?

在之后找答案的过程中无意间看到了别人的一段代码:

createElement('a', {
    attrs: {
        name: headingId,
        href: '#' + headingId
    }
}, this.$slots.default)

于是把代码改为了:

h("div", {}, [
    h("span", "文本内容"),
    h("a", { attrs: { href: "自定义跳转链接", target: "_blank" } }, "查看")
])

好家伙,对了,太对了=_=。

Comments are closed.