5. Vue v-text、v-html、v-bind的使用

Posted 2023-03-28

参考技术A v-text和一样
v-text不解释标签，v-html解释标签
在HTML输出data中的值我们可以用xxx,但是有的时候比如网速卡的时候。会暴露出我们的,所以这个时候我们就需要v-text和v-html。
当我们要是渲染不出来的情况下他就会出现xxx,但是我们要是用了v-text 他要是渲染的慢，则加载不出来。页面上显示的就是null而不是message。

innerHTML解释html格式
innerText无法解释html格式

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。

插值语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind指令

无效果

v-bind简写方式:

为 v-html 添加 CSS 样式

【中文标题】为 v-html 添加 CSS 样式

【英文标题】：Add CSS style to v-html

【发布时间】：2020-07-30 18:17:44

【问题描述】：

我想在v-html 中为 HTML 代码添加样式。我尝试了几种解决方案，但没有任何功能:(

这是我的代码：

模板：

<div
  class="para"
  v-html="value" 
/>

脚本：

export default 
  data () 
    return 
      value : "<h2> TITLE </h2> <p> PARA </p>"
    
  ,

风格：

.para >>> h2 
  color: blue;


.para >>> p 
  color: red;

提前致谢！

【问题讨论】：

我不太确定 >>> 是否是一个有效的 css 选择器组合器。您的意思是使用> 吗？

在其他主题上，他们每次都使用 >>> 案例medium.com/@brockreece/scoped-styles-with-v-html-c0f6d2dc5d8e

您是否在样式标签中添加了 scoped 属性？

【参考方案1】：

如果您在没有 SASS 的情况下使用 scoped 样式，请以这种方式使用 >>> 组合器：

>>> .para > h2 
  color: blue;


>>> .para > p 
  color: red;

如果您使用scoped 样式与 SASS，请使用::v-deep 组合器：

::v-deep .para > h2 
  color: blue;


::v-deep .para > p 
  color: red;

否则：

.para > h2 
  color: blue;


.para > p 
  color: red;

这是demo