Vue.js中如何为模板字面量的指定部分设置样式？

首先要明确：原生HTML的title属性不支持渲染HTML或样式，如果你是要给鼠标悬停提示加样式，必须用自定义tooltip组件；如果是组件内部的显示内容需要样式，就用Vue的v-html指令来渲染带标签的字符串。

步骤1：修改方法返回带样式标签的HTML字符串 #

把你的方法改成返回包含<span>的HTML片段，给需要样式的部分加类名：

methodNameDisplay(m) {
  if (m.friendlyName === m.methodName) {
    return m.friendlyName;
  } else {
    return `${m.friendlyName} - <span class="method-name">${m.methodName}</span>`;
  }
}

场景A：title是组件的显示内容（非hover提示） #

修改MethodRepeaterTitle组件的模板，用v-html替代普通插值，这样Vue会解析HTML标签：

<template>
  <!-- 用v-html渲染带标签的内容 -->
  <div v-html="title" class="title-container"></div>
</template>

<script>
export default {
  props: ['title']
}
</script>

<style scoped>
/* 给目标部分加样式 */
.method-name {
  color: #666;
  font-size: 0.9em;
  font-style: italic;
}
</style>

场景B：title是鼠标悬停提示 #

原生title做不到样式，得用自定义tooltip组件替代。这里给一个简单的实现：

1. 先写Tooltip组件：

<template>
  <div class="tooltip-wrap" @mouseenter="show = true" @mouseleave="show = false">
    <slot></slot> <!-- 放原本的组件内容 -->
    <div v-if="show" class="tooltip-box" v-html="tipContent"></div>
  </div>
</template>

<script>
export default {
  props: ['tipContent'],
  data() {
    return {
      show: false
    }
  }
}
</script>

<style scoped>
.tooltip-wrap {
  position: relative;
  display: inline-block;
}
.tooltip-box {
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  background: #2c3e50;
  color: #fff;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 14px;
}
/* 给提示里的目标部分加样式 */
.tooltip-box .method-name {
  color: #1abc9c;
  font-weight: bold;
}
</style>

2. 使用时替换原组件的用法：

<Tooltip :tipContent="showMName ? methodNameDisplay(m) : m.friendlyName">
  <MethodRepeaterTitle />
</Tooltip>

⚠️ 注意：使用v-html时要确保内容是可信的，避免用户输入的恶意代码导致XSS风险。

内容的提问来源于stack exchange，提问作者RobonTheCase