vue 依据条件渲染标签的特殊情况？

Question

标题可能描述的不太清晰，请见谅

比如

<router-link :to="nav.to">
    {{ nav.name }}
    <span v-if="nav.data">({{nav.data}})</span>
</router-link>

会生成

<a href="#/" class="router-link-exact-active router-link-active">首页</a>

假设某条数据没有链接地址即 nav.to为空
也会生成

<a href="#/" class="router-link-exact-active router-link-active">首页</a>

能不能把链接去掉呢？

Answer 1

在你得到这个链接的地方做一个判断， if(nav.to == ""){ nav.to = javascript:; }其实就是判断这个是否为空， 如果为空，去掉这个链接的跳转效果javascript:;是阻止跳转的。

Answer 2

在外层包个盒子 v-show 呗 不行把标签去掉不更好？

Answer 3

<router-link :to="nav.to?nav.to:''">

{{ nav.name }}
<span v-if="nav.data">({{nav.data}})</span>

</router-link>

写个三目，做下判断，为空就让href也为空

Answer 4

<router-link v-if="nav.to" :to="nav.to">
    {{ nav.name }}
    <span v-if="nav.data">({{nav.data}})</span>
</router-link>