vue.js 怎么给v-html指令绑定的数据添加样式

在Vue组件中,使用.foo img{max-width:100%}不会生效,解决方法如下:

<template>
    <div class="foo">
        <div v-html="myHtml"></div>
    </div>
</template>
<style scoped>
    .foo { height: 300px; }
</style>

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

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

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

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

 

 

修改时间 2018-09-15

声明:本站所有文章和图片,如无特殊说明,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。
随机推荐
Express.js CSRF 安全防护
JavaScript 滚动浏览器窗口到指定的元素
JavaScript Proxy 代理
用 JavaScript 实现数字增加滚动动画
WordPress 主题激活和取消激活钩子
WordPress 常用函数 / sanitize_user
RESTful API 执行 delete 返回204无法获取 Body
Linux 网络流量监控 iftop