vue 字符串拼接

// 在 Vue 中，字符串拼接可以通过多种方式实现。以下是几种常见的方法：

// 1. 使用模板字符串（Template Literals）
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    message() {
      // 使用模板字符串进行字符串拼接
      return `Hello, ${this.firstName} ${this.lastName}`;
    }
  }
};
</script>

// 2. 使用 + 运算符
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    message() {
      // 使用 + 运算符进行字符串拼接
      return 'Hello, ' + this.firstName + ' ' + this.lastName;
    }
  }
};
</script>

// 3. 使用数组的 join 方法
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    message() {
      // 使用数组的 join 方法进行字符串拼接
      return ['Hello,', this.firstName, this.lastName].join(' ');
    }
  }
};
</script>