Vue3 Composition API复选框联动消息及文本样式设置问题

1. 原生JavaScript场景 #

如果是原生JS操作DOM，别用textContent（会把HTML当纯文本），改用innerHTML插入内容：

// 原无效写法
// infoBox.textContent = infoBodyOptions[selectedType];

// 修改后可识别HTML标签
infoBox.innerHTML = infoBodyOptions[selectedType];

示例定义：

const infoBodyOptions = {
  option1: '<strong>DESCRIPTION</strong>: 选项1的详细信息',
  option2: '<strong>DESCRIPTION</strong>: 选项2的详细信息',
  default: '请选择一个选项查看详情'
};

2. React场景 #

React默认转义HTML，可通过两种方式解决：

• 用dangerouslySetInnerHTML直接渲染HTML字符串：

const infoBodyOptions = {
  option1: '<strong>DESCRIPTION</strong>: 选项1详情',
  option2: '<strong>DESCRIPTION</strong>: 选项2详情',
  default: '请选择单个选项'
};

// 渲染逻辑
<div className="info-box">
  {infoTypes.length === 1 ? 
    <div dangerouslySetInnerHTML={{ __html: infoBodyOptions[infoTypes[0]] }} /> : 
    infoBodyOptions.default
  }
</div>

• 更安全的方式：用React元素定义内容，直接渲染：

const infoBodyOptions = {
  option1: (
    <>
      <strong>DESCRIPTION</strong>: 选项1的详细信息
    </>
  ),
  option2: (
    <>
      <strong>DESCRIPTION</strong>: 选项2的详细信息
    </>
  ),
  default: '请选择一个选项查看详情'
};

// 渲染逻辑
<div className="info-box">
  {infoTypes.length === 1 ? infoBodyOptions[infoTypes[0]] : infoBodyOptions.default}
</div>

3. Vue场景 #

使用v-html指令解析HTML内容：

<template>
  <div class="info-box" v-html="displayMessage"></div>
</template>

<script>
export default {
  data() {
    return {
      infoTypes: [],
      infoBodyOptions: {
        option1: '<strong>DESCRIPTION</strong>: 选项1详情',
        option2: '<strong>DESCRIPTION</strong>: 选项2详情',
        default: '请选择单个选项'
      }
    };
  },
  computed: {
    displayMessage() {
      return this.infoTypes.length === 1 
        ? this.infoBodyOptions[this.infoTypes[0]] 
        : this.infoBodyOptions.default;
    }
  }
};
</script>

也可以用Vue的h函数创建虚拟节点，避免HTML字符串：

import { h } from 'vue';

const infoBodyOptions = {
  option1: h('div', [h('strong', 'DESCRIPTION'), ': 选项1的详细信息']),
  option2: h('div', [h('strong', 'DESCRIPTION'), ': 选项2的详细信息']),
  default: '请选择一个选项查看详情'
};

4. 通用安全优化 #

如果内容存在用户输入风险，优先用框架原生的元素/组件方式定义内容，避免直接使用HTML字符串。也可以通过CSS类样式化：

.desc-label {
  font-weight: bold;
}

内容定义为：

const infoBodyOptions = {
  option1: '<span class="desc-label">DESCRIPTION</span>: 选项1详情'
};

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