Vue 2.6.12强制修改标签open属性为open="open"如何解决

1. Vue修改open属性取值的原因 #

Vue 2.x的模板编译器内置了HTML标准布尔属性的映射表，open属于标准布尔属性（对应原生<details>标签控制展开/收起的属性）。按照Vue对布尔属性的默认处理逻辑：只要标签上存在该属性，无论设置的自定义值是什么，都会被自动转换为open="open"，这一逻辑不区分标签类型，所有标签上的open属性都会被统一处理。
你观察到v-pre不生效，是因为v-pre仅跳过标签内部Mustache表达式、指令的编译，属性的布尔类型转换属于模板解析阶段的基础规则，不受v-pre控制。

2. 对应的解决方案 #

方案1：使用.attr修饰符强制绑定为原生属性（单属性修改） #

Vue 2.6+支持v-bind的.attr修饰符，可以强制将绑定值作为DOM原生属性处理，绕过布尔属性的默认转换逻辑：

<mfenced close="]" v-bind:open.attr="'['">
  <!-- 公式内容 -->
</mfenced>

方案2：将MathML内容通过v-html渲染（局部区域生效） #

把整段MathML代码作为字符串存放在data中，使用v-html指令渲染，Vue不会解析v-html插入的内容的属性，完全保留原始值：

// 组件data中定义
data() {
  return {
    mathMlStr: `<math xmlns="http://www.w3.org/1998/Math/MathML">
    <mi>f</mi>
    <mfenced close="]" open="[">
        <mrow><mi>a</mi><mo>,</mo><mi>b</mi></mrow>
    </mfenced>
</math>`
  }
}

<!-- 模板中使用 -->
<div v-html="mathMlStr"></div>

方案3：配置忽略指定标签（全局生效） #

将不需要Vue处理的标签加入全局ignoredElements配置，Vue会跳过对这些标签的所有属性处理：

// 入口文件中Vue实例初始化前配置
Vue.config.ignoredElements = ['mfenced', 'math', 'mi', 'mo', 'mrow'] // 按需加入所有MathML相关标签

配置完成后，这些标签上的open属性会保留设置的原始值。

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