vue 中属性值上变量和字符串怎么拼接

曈欣2024-09-22 22:06

在Vue 3中，可以使用模板字面量（template literals）或者表达式绑定（directives）来实现属性值上变量和字符串的拼接。

例如，假设你有一个变量text和一个字符串'hello'，你可以这样拼接它们：

1.使用模板字面量（反引号...）：

html 复制代码

<template>
  <div :attribute="`${text} hello`">Text</div>
</template>
 
<script setup>
import { ref } from 'vue';
const text = ref('World');
</script>

2.使用表达式绑定（使用v-bind指令）：

html 复制代码

<template>
  <div v-bind:attribute="text + ' hello'">Text</div>
</template>
 
<script setup>
import { ref } from 'vue';
const text = ref('World');
</script>

在这两种情况下，attribute的值将会是拼接后的字符串，例如'World hello'。