在最开始想讲一下何时会用到v-html这个指令,有时候后台传过来的数据并不是纯文本,而是会包含HTML标签,如此,如果像平常一样,选择直接渲染到页面上,就会引发格式样式的错误,尤其是十分不美观,而往往,UI会给我们指定样式,那么问题来了,我们要怎么去做呢?
1、首先,其实渲染代码很简单,只需要用v-html即可,如下图所示,
2、我们的重点应该是在<style></style>
样式那一part 。
***重点!!!***打开元素审查,或者直接F5快捷键打开,在“Elements”那一块找到返回给我们的带有标签的数据,找到对应的class名(标签名),复制下来,写到我们的样式中,下面是我写卡片的一部分样式
那些长长的class名都是后台返给我的,其实并不难就是有点麻烦,就是相当于别人已经把class名给你起好了,你只需要往它们身上添加所需要的样式即可。
可能需要注意几点:
一:一定要找对层级关系,否则很有可能没有反应,所以找的时候不要着急;
二:style不要添加scoped这个属性,这会限制住,样式上不去;
三:如果样式真的好像上不去,或者觉得比较困难,亦或者是好像没有找到但又需要的最外面的边框,可以像我一样,给一个大的div-class名。
PS:绝对没有想象的那么难,就是耐心一点,很快就上手了,希望大家不要像我一样第一次接触,走过漫漫坎坷路才找到正确路子。