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 列表前綴修改