vue3 v-html会丢失有序列表和无需列表序号

在Vue 3中，使用v-html指令来渲染包含有序列表（ol）或无序列表（ul）的HTML内容时，可能会遇到序号（列表项前的数字或点）丢失的问题。这通常是因为Vue 3在渲染动态内容时，默认使用了innerHTML来替换元素的内容，而innerHTML不会保留序号。

解决方法：

1. 使用v-for指令替代v-html来手动控制列表渲染，这样可以确保序号正确显示。
2. 如果必须使用v-html，可以在插入HTML内容之前预处理列表，为每个列表项手动添加序号（例如通过正则表达式替换（li）标签）。

示例代码（使用v-for替代v-html）：

<template> 
    <ol> 
    <li v-for="(item, index) in items" :key="index">{{ item }}</li> 
    </ol>
</template> 
<script>
    export default { 
        data() { 
            return { items: ['第一项', '第二项', '第三项'] }; 
        }
    };
</script>

如果你的场景中确实需要使用v-html且需要保留序号，你可以预先处理HTML内容，例如：

// 在组件的方法中
methods: { 
    fixListNumbers(html) { 
    // 使用正则表达式为每个<li>标签添加序号属性 
        return html.replace(/<li>/gi, match => `<li style="list-style-type: none; counter-increment: my-list;"><span style="list-style-type: decimal;">${match}</span>`); 
    }
},
// 在数据中使用处理后的HTML
data() { 
    return { rawHtml: '<ol><li>第一项</li><li>第二项</li></ol>' };
},
// 在模板中绑定处理过的
HTML<div v-html="fixListNumbers(rawHtml)"></div>