Vue中v-bind:class绑定成功但对应样式未正确显示问题求助

• 确认.text-danger样式存在
  text-danger不是浏览器原生自带的样式类，只有引入Bootstrap等预设了该类的UI框架，或者你手动写了对应CSS规则才会生效。如果没有引入对应框架，你需要自行添加样式：

.text-danger {
  color: #ff0000;
}

• 检查CSS优先级冲突
  打开浏览器F12开发者工具，选中<p>标签，查看「样式」面板里的color属性，看是否有其他更高优先级的规则（比如更具体的选择器、带!important的规则）覆盖了.text-danger的颜色设置，被划掉的规则就是被覆盖的内容，可以直接定位到冲突的样式来源。
• 排查单文件组件作用域限制
  如果你用的是Vue单文件组件，且<style>标签添加了scoped属性，当前组件的样式默认不会作用于内部嵌套的子组件，如果你的<p>标签封装在子组件内，需要使用深度选择器穿透作用域：
  • Vue2写法：::v-deep .text-danger { color: red }
  • Vue3写法：:deep(.text-danger) { color: red }
• 行内样式验证
  你可以直接给<p>标签加上行内样式<p style="color: red">tralala</p>测试，如果行内样式也不生效，说明存在全局的强制颜色规则覆盖，直接在开发者工具计算样式面板查找color属性的来源即可。

内容的提问来源于stack exchange，提问作者Anuska