vue字符串拼接

<template>
  <div>
    <!-- 使用模板字符串进行字符串拼接 -->
    <p>{{ message1 + " " + message2 }}</p>
    <!-- 使用 v-bind 指令进行字符串拼接 -->
    <p :title="message1 + ' - ' + message2">Hover me</p>
    <!-- 使用计算属性进行字符串拼接 -->
    <p>{{ fullMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message1: 'Hello',
      message2: 'Vue'
    };
  },
  computed: {
    // 计算属性可以用于更复杂的字符串拼接逻辑
    fullMessage() {
      return this.message1 + ' and ' + this.message2;
    }
  }
};
</script>

解释说明：

1. 模板字符串拼接：在模板中直接使用 {{ message1 + " " + message2 }} 进行简单的字符串拼接。
2. v-bind 指令：使用 v-bind 指令将字符串拼接结果绑定到元素的属性上，例如 :title="message1 + ' - ' + message2"。
3. 计算属性：通过计算属性 fullMessage 实现更复杂的字符串拼接逻辑，并且可以在模板中多次复用该计算属性。