5. Vue v-text、v-html、v-bind的使用
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了5. Vue v-text、v-html、v-bind的使用相关的知识,希望对你有一定的参考价值。
参考技术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
【讨论】:
以上是关于5. Vue v-text、v-html、v-bind的使用的主要内容,如果未能解决你的问题,请参考以下文章
vue--指令之v-cloak,v-text,v-html之间的区别
Vue简明实用教程(03)——v-text和v-html指令
Vue简明实用教程(03)——v-text和v-html指令