时间戳

首页 > 解决方案 > Vuejs中的条件a href

vue.js - Vuejs中的条件a href

问题描述

我正在 VueJS 中呈现商店标题列表，其中一些具有 url 属性，而另一些则没有。如果标题有 url，我想添加 aa href 属性：

<div v-for="(store, index) in stores">
  <span v-if="store.link"><a :href="store.link" target="_blank">{{ store.title }}</a></span>
  <span v-else="store.link">{{ store.title }}</span>
</div>

这可行，但代码看起来重复。反正有没有进一步简化代码？

标签： vue.jsvuejs2

解决方案

您可以使用组件标签：

var app = new Vue({
  el: '#app',
  data () {
    return {
      stores: [
        {title:'product1',link:'/products/222'},
        {title:'product2'},
        {title:'product3',link:'/products/333'},
        {title:'product4'}
      ]
    }
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <div v-for="(store, index) in stores">
    <component :is="store.link?'a':'span'" :href="store.link || ''" target="_blank">{{store.title}}
    </component>
  </div>
</div>

推荐阅读