Question

我在VueJS中呈现商店标题列表，其中一些有url属性，其中一些不是。如果标题有一个url，我想添加一个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

你可以使用组件标签：

＆＃13;

var app = new Vue({
  el: '#app',
  data () {
    return {
      stores: [
        {title:'product1',link:'/products/222'},
        {title:'product2'},
        {title:'product3',link:'/products/333'},
        {title:'product4'}
      ]
    }
  }
})

＆＃13;

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

＆＃13;

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>

Answer 3

你可以在 vue3 中使用动态参数 https://v3.vuejs.org/guide/template-syntax.html#dynamic-arguments

<a v-bind:[attributeName]="url"> ... </a>

或者绑定一个属性的对象

<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

Vuejs中的条件a href

3 个答案: