如何在 vue 组件的 href 中添加条件？

Question

我的 vue 组件是这样的：

<template>
    <ul class="nav nav-tabs nav-tabs-bg">
        <li role="presentation">
            <a :href="baseUrl+'/search/store/'+param">
                Store
            </a>
        </li>
    </ul>
</template>

<script>
    export default {
        props: ['type', 'param'],
    }
</script>

我想在 href 中添加条件

如果类型 = 'a' 那么 href =

<a :href="baseUrl+'/search/store/'+param">Store</a>

如果类型 = 'b' 那么 href =

<a href="javascript:">Store</a>

我该怎么做？

Answer 1

三元运算符对此很有用。例如：

<a :href="type == 'a' ? baseUrl+'/search/store/'+param : 'javascript:'">Store</a>

或者，使用 v-if:

<a v-if="type == 'a'" :href="baseUrl+'/search/store/'+param">Store</a>
<a v-else-if="type == 'b'" :href="'javascript:'">Store</a>

Answer 2

另一种选择是创建计算属性:

<script>
    export default {
        props: ['type', 'param'],
        computed: {
          url () {
            return this.type === 'a'
              ? `${this.baseUrl}/search/store/${this.param}`
              : 'javascript:'
          }
        }
    }
</script>

寺庙将是：

<a :href="url">Store</a>

如何在 vue 组件的 href 中添加条件？

How can I add condition in href on vue component?

vue.js

vuejs2

vue-component

vuex