Vue.js中条件渲染带链接店铺标题的代码简化方法问询

你的代码确实能正常工作，但重复写{{ store.title }}确实有点冗余，这里有几个更简洁的优化方案，你可以根据自己的习惯选择：

方案一：精简结构，直接条件渲染a/span #

先把原来外层多余的<span>去掉，直接对<a>和<span>做条件判断，虽然还是写了两次标题，但整体结构更清爽：

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

方案二：用动态组件彻底消除代码重复 #

这个方案能完全避免标题的重复编写，利用Vue的动态组件特性，根据是否存在link切换渲染标签，并动态绑定对应属性：

Vue 2/Vue 3通用写法 #

<div v-for="(store, index) in stores" :key="index">
  <component 
    :is="store.link ? 'a' : 'span'"
    v-bind="store.link ? { href: store.link, target: '_blank' } : {}"
  >
    {{ store.title }}
  </component>
</div>

这里component会根据is的值自动渲染成<a>或<span>，v-bind则根据条件传递属性——有链接时绑定href和target，没有时不传任何属性，标题只需要写一次就够了。

方案三：抽成独立子组件（推荐大型项目） #

如果这个标题展示逻辑会在多个页面复用，把它封装成独立子组件会更便于维护：

子组件：StoreTitle.vue #

<template>
  <a v-if="link" :href="link" target="_blank">{{ title }}</a>
  <span v-else>{{ title }}</span>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    },
    link: {
      type: String,
      default: ''
    }
  }
}
</script>

父组件中使用 #

<template>
  <div v-for="(store, index) in stores" :key="index">
    <StoreTitle :title="store.title" :link="store.link" />
  </div>
</template>

<script>
import StoreTitle from './StoreTitle.vue'

export default {
  components: { StoreTitle },
  // ... 其他业务代码
}
</script>

这种方式让父组件的代码更简洁，逻辑也更清晰，后续要修改标题的样式或交互逻辑，只需要调整子组件即可。

内容的提问来源于stack exchange，提问作者mkto