v-html中标签添加CSS样式

原创 2018年04月16日 17:35:40

Vue组件中,我们可以使用<style scoped>标签来添加针对该组件的CSS样式。

<template>
    <div class="foo">
        <div v-html="myHtml"></div>
    </div>
</template>
<style scoped>
    .foo { height: 300px; }
</style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

而如果在组件中使用了v-html,要为myHtml中的标签添加CSS样式,我们需要在写样式的时候添加>>>

.foo >>> img { max-width: 100%; }
  • 1

这样,编译时以上CSS才会被编译为

.foo[data-v-xxxxxxx] img { max-width: 100%; }

基于ABP添加一个简单的功能

-
  • 1970年01月01日 08:00

Vuejs使用scoped style为v-html中标签添加CSS样式

在Vue组件中,我们可以使用标签来添加针对该组件的CSS样式。 template> div class="foo"> div v-html="myHtml">div> ...
  • lgyaxx
  • lgyaxx
  • 2018-02-07 11:14:12
  • 392

v-html中使用filters

Vue2.0的过滤器只能应用在{{ }}和v-bind中,不再支持v-html中使用,如果要在v-html中使用过滤器,怎么办呢? 解决方法有三种: 1、使用全局方法 定义方法 methods: { ...
  • oucqsy
  • oucqsy
  • 2017-07-14 10:54:42
  • 1283

v-html 和{{}}区别

在网页中,后台传来的json数据中包含html标签,将该json数据绑定到Vue.js中对象中,对该对象进行for循环,发现数据中的html标签不能被解析,而是当作字符显示出来。 Vue.js中提供...
  • sinat_36194710
  • sinat_36194710
  • 2017-08-15 14:27:02
  • 990

vue中v-text,v-html, v-model, {{}}之间的异同

首先我们知道vue中有很多自定义指令,以v- 开头,例如:v-text,v-bind,v-model, v-if,等 在这些指令中,部分指令之间是很容易被混淆,所以今天决定自己总结一下以下几个相似指令...
  • u014541501
  • u014541501
  • 2017-10-09 13:39:08
  • 4064

规避使用 vue 的 v-html 指令的方法

一、引言前一阵子在写业务的时候,发现公司的代码里,有个场景是这样的:需要用户定义一些活动规则,然后在左边的手机预览图中,实时显示出这些活动规则。于是,同事用了一个带 v-html 指令的 标签,并且...
  • JimmyLuo17
  • JimmyLuo17
  • 2017-08-01 23:51:49
  • 4217

使用v-html解决Vue.js渲染过程中html标签不能被解析(html标签显示为字符串)

在网页中,后台传来的json数据中包含html标签,将该json数据绑定到Vue.js中对象中,对该对象进行for循环,发现数据中的html标签不能被解析,而是当作字符显示出来。问题如下所示: ...
  • farYang
  • farYang
  • 2016-11-02 20:34:44
  • 43478

v-text和v-html

v-text和{{}}一样 v-text不解释标签,v-html解释标签 解释html标签可能导致xss攻击,不要使用用户提供的内容插值 {{m...
  • qq_31070475
  • qq_31070475
  • 2017-11-08 15:33:27
  • 256

如何用JS来增加CSS样式

方法: document.getElementById("xx").style.xxx中的所有属性是什么 盒子标签和属性对照 CSS语法(不区分大小写) J...
  • zzjmay
  • zzjmay
  • 2014-10-24 11:13:31
  • 1180

关于新建CSS 中的 类 标签 高级

 类(Class)实际上是对某种类型的对象定义变量和方法的原型。      类是对某个对象的定义。它包含有关对象动作方式的信息,包括它的名称、方法、属性和事件。实际上它本身 并不是对象,因为它不存在于...
  • xinxin19881010
  • xinxin19881010
  • 2007-08-24 01:59:00
  • 661
收藏助手
不良信息举报
您举报文章:v-html中标签添加CSS样式
举报原因:
原因补充:

(最多只允许输入30个字)