如何在vue组件上添加href条件?
问题描述:
我VUE成分是这样的:如何在vue组件上添加href条件?
<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
如果type = 'A',那么HREF =
<a :href="baseUrl+'/search/store/'+param">Store</a>
如果type = 'B',那么HREF添加条件=
<a href="javascript:">Store</a>
我该怎么办?
答
另一个选择是创建计算属性:
<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>
答
三元运营商可以做到这一点。例如:
<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>