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

在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'

相关推荐
不买Huracan不改名3 分钟前
安装Codex(需要用npm)
前端·npm·node.js
Dorcas_FE12 分钟前
axios请求缓存与重复拦截:“相同请求未完成时,不发起新请求”
前端·spring·缓存
dreams_dream19 分钟前
vue中axios与fetch比较
前端·javascript·vue.js
梦鱼40 分钟前
Vue 项目图标一把梭:Iconify 自用小记(含 TS/JS 双版本组件)
前端·javascript·vue.js
best66641 分钟前
Flex 与 Grid 的 order 参数:布局界的 "插队神器"
前端
小噔小咚什么东东41 分钟前
看到了很多次WebRTC,但是你真的需要它吗?
前端·webrtc
猫七先生42 分钟前
微信小程序一键登录可行性方案
前端·微信小程序
维他AD钙42 分钟前
前端开发 8 个非常实用小技巧:高效解决日常开发痛点
前端
光影少年1 小时前
webpack和vite优化方案都有哪些
前端·webpack·node.js