时间戳

首页 > 解决方案 > 使用 vueJS 有条件地设置 href 属性

javascript - 使用 vueJS 有条件地设置 href 属性

问题描述

 <tr v-for="(i, index) in streams">
                            <td class="text-center">{{index + 1}}</td>
                            <td class="text-center">{{i.title}}</td>
                            <td class="text-center"><label class="label" v-bind:class="{ 'label-danger' : i.stateIndex === 0, 'label-warning' : i.stateIndex === 1, 'label-success' : i.stateIndex === 2 }">{{i.state}}</label></td>
                            <td class="text-center link"><a v-bind:href="i.link" target="_blank"><i v-bind:class="i.streamingPlatformClass"></i></a></td>
                            <td class="text-center">{{i.userId}}</td>
                            <td class="text-center">{{i.streamingPlatformID}}</td>
                            <td class="text-center"><button v-on:click="removeStream(i.id)" class="btn btn-primary manageStreamButton">Remove</button><button v-on:click="stopStream(i.id)" v-if="i.stateIndex != 2" class="btn btn-primary manageStreamButton">Stop</button></td>
                        </tr>

在具有“链接”类的 TD 中，我试图有条件地设置一个 href 属性。流中的“链接”属性是 youtube 链接或带有 FB 视频源的标签。这个想法是在链接属性具有 youtube 链接时使其成为可点击的链接，并在链接属性具有标签时禁用 href 属性，使其不可点击。到目前为止，我已经设法有条件地更改了 href 属性，但它仍然可以点击并带有链接。我知道可以通过 onclick return false 来完成，但我正在寻找另一种方法。或者，如果可以有条件地删除标签，那也是一个很好的解决方案。

标签： javascripthtmlvue.js

解决方案

您可以使用 v-if 有条件地删除标签。这确实意味着复制您的图标代码；

<td class="text-center link">
    <a v-if="showLink" v-bind:href="i.link" target="_blank"><i v-bind:class="i.streamingPlatformClass"></i></a>
    <i v-if="!showLink"  v-bind:class="i.streamingPlatformClass"></i>
</td>

推荐阅读