Vue.jsでv-if, v-elseの中身を共通化するには

Question

Vue.jsで以下のようなプログラムを書くときに、Hello Worldの部分は同じなので、外出しして共通化したいのですが、どのように書けば良いでしょうか。

<a v-if="link">
  Hello World
</a>
<span v-else>
  Hello World
</span>

Answer 1

単純なテキストであればdataに入れて共通化する方法がわかりやすいです。

<template>
  <a v-if="link">
    {{ text }}
  </a>
  <span v-else>
    {{ text }}
  </span>
</template>

<script>
export default {
  data() {
    return {
      text: 'Hello World'
    }
  }
}
</script>

管理には十分注意したほうが良いですがコンポーネントでタグを動的に切り替えることも可能です。

<template>
  <component :is="tag">
    <slot />
  </component>
</template>

<script>
export default {
  props: {
    tag: {
      type: String,
      default: 'span'
    }
  }
}
</script>

Comments

[mira_]

ご回答ありがとうございます。
単純なテキストではなく、複雑なDOMの場合はどうすれば良いでしょうか。

[nt4c]

複雑というのがどの程度の設計のことを指しているかは不明ですが、質問にあるようなラッパーのDOM要素を変更させたいときは回答の後者の方法を採用してください。