原因:开发者工具中可以看到不知哪引入(本博客情况)的列表覆盖样式代码,如下:
ol, ul
- margin:
- padding:
- list-style:
实现思路:既然被全局覆盖了,那再用自己需要的样式覆盖一次就好~
实践:
1 <div v-html="info.content" /> 2 3 ::v-deep ol { 4 list-style: disc !important; 5 } 6 7 ::v-deep ul { 8 list-style: decimal !important; 9 }
要点:v-html 渲染的内容修改样式需要用到深度作用选择器 ::v-deep ,注意 ::v-deep 后面一定要留空格不然不起作用
拓展:/deep/ 在 vue-cli3 以上版本不起作用
参考链接:ul ol 列表前缀修改