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

飞翔的鱼丸  2018-06-02 JavaScript  1102

在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%; }

Vue.js

修改时间 2018-09-15

声明：本站所有文章和图片，如无特殊说明，均为原创发布。商业转载请联系作者获得授权，非商业转载请注明出处。