조건부 a href(Vuejs)

조건부 a href(Vuejs)

VueJ에서 스토어 타이틀 목록을 렌더링하고 있는데, 일부는 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>

이것은 동작하지만, 코드는 중복되어 보인다.코드를 더 단순화할 수 있는 방법이 있습니까?

컴포넌트 태그를 사용할 수 있습니다.

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>

난 첫 번째를게요.span필요하지 않은 요소입니다.또,v-else는 조건문을 필요로 하지 않습니다(그렇지 않습니다).

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>

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>

언급URL : https://stackoverflow.com/questions/50385958/conditional-a-href-in-vuejs