Vue.jsで変数とテキストを結合してimgのsrc属性に使用する方法

テンプレート内で変数とテキストを結合する方法:

<template>
  <div>
    <img :src="imageUrl" alt="画像">
  </div>
</template>
<script>
export default {
  data() {
    return {
      imageName: 'example',
      imageExtension: '.jpg'
    };
  },
  computed: {
    imageUrl() {
      return this.imageName + this.imageExtension;
    }
  }
};
</script>

上記の例では、imageUrlというcomputedプロパティを定義し、imageNameとimageExtensionを結合して返しています。テンプレート内で:srcディレクティブを使用して、imageUrlをimg要素のsrc属性にバインドします。

メソッドを使用して変数とテキストを結合する方法:

<template>
  <div>
    <img :src="getImageUrl()" alt="画像">
  </div>
</template>
<script>
export default {
  data() {
    return {
      imageName: 'example',
      imageExtension: '.jpg'
    };
  },
  methods: {
    getImageUrl() {
      return this.imageName + this.imageExtension;
    }
  }
};
</script>

上記の例では、getImageUrlというメソッドを定義し、同様にimageNameとimageExtensionを結合して返します。テンプレート内でメソッドを呼び出し、その戻り値をimg要素のsrc属性にバインドします。

これらの方法を使用すると、Vue.jsでimg要素のsrc属性に変数とテキストを結合することができます。必要に応じて、変数を動的に更新し、画像のURLを切り替えることもできます。