当前位置：首页 > article >正文

vue3: 通过template解析渲染

article 2025/2/12 16:26:58

问：

;这样可以，现在我希望将data.text颜色改为蓝色 dat.num和data.unit丝柏舍我现在代码是这样的<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane
v-for="(tab, index) in tabsData"
:key="index"
:label=" `${data.text} ${data.num} ${data.unit}`"
:name="tab.name"
>

</el-tab-pane>
</el-tabs>在我希望将data.text颜色改为蓝色 dat.num和data.unit是白色，不要修改html请问怎么写？

回答：

在 Vue 3 中使用 setup 语法糖时，你可以通过计算属性和模板引用来实现相同的效果。以下是如何在 Vue 3 的 setup 语法糖中实现你的需求：

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane
      v-for="(tab, index) in tabsData"
      :key="index"
      :name="tab.name"
    >
      <template #label>
        <span v-html="generateLabel(tab)"></span>
      </template>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const activeName = ref('first');
    const tabsData = ref([
      { name: 'first', text: 'Example Text', num: 123, unit: 'units' },
      // 添加更多的 tab 数据
    ]);

    const generateLabel = (tab) => {
      return `<span style="color: blue;">${tab.text}</span> <span style="color: white;">${tab.num} ${tab.unit}</span>`;
    };

    const handleClick = (tab, event) => {
      console.log(tab, event);
    };

    return {
      activeName,
      tabsData,
      generateLabel,
      handleClick
    };
  }
};
</script>

<style>
/* 添加任何必要的样式 */
</style>
在这个示例中，我们使用了 Vue 3 的 setup 语法糖来定义组件的状态和方法。generateLabel 方法生成带有内嵌样式的 HTML 字符串，并通过 v-html 指令在模板中解析这些字符串。

请注意，使用 v-html 指令时要小心，确保输入的 HTML 内容是安全的，以避免 XSS 攻击

查看全文

http://www.kler.cn/a/542291.html