v-html中的 ul ol 列表不显示圆点或者数字前缀问题解决

原因：开发者工具中可以看到不知哪引入（本博客情况）的列表覆盖样式代码，如下：

ol, ul {

1. margin: 0;
2. padding: 0;
3. list-style: none;

}

 

实现思路：既然被全局覆盖了，那再用自己需要的样式覆盖一次就好~

 

实践：

<div v-html="info.content" />

::v-deep ol {
    list-style: disc !important;
}

::v-deep ul {
    list-style: decimal !important;
}

要点：v-html 渲染的内容修改样式需要用到深度作用选择器 ::v-deep ，注意 ::v-deep 后面一定要留空格不然不起作用

拓展：/deep/ 在 vue-cli3 以上版本不起作用

 

参考链接：ul ol 列表前缀修改