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中添加条件

如果输入=＆＃39; a＆＃39;然后href =

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

如果输入=＆＃39; b＆＃39;然后href =

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

我该怎么做？

Answer 1

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

<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>

Answer 2

三元运营商可以为此做好事。例如：

<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>

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

2 个答案: