Vuejs中的条件href

Question

我正在VueJS中呈现商店标题的列表，其中一些具有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>

可以，但是代码看起来重复。是否有进一步简化代码的方法？

Answer 1

您可以使用组件标签：

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>

Answer 2

我会删除第一个span元素，因为它没有必要。另外，v-else不需要条件语句（它不是v-else-if）：

new Vue({
  el: '#app',
  data: {
    stores: [
      { link: 'foo', title: 'foo-text' },
      { title: 'bar-text' } 
    ]
  }
})

<script src="https://unpkg.com/vue"></script>

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