.vue文件中,给动态添加的dom设置style没效果?

在vue updated()方法中我利用ajax获取数据动态给模版插入dom但是这样在.vue文件中style标签下给动态添加的dom设置样式无效,怎么解决?
例如
`<style scoped>
.text{ color:red;}
</style>
`
这个样式是动态dom的,在模版中不存在,是我利用ajax请求在钩子函数中动态生成的。设置无效,只有模版中有的dom,设置样式才有效果。怎么办?我就想给它加上样式

回答:

scoped 属性使得模板中的 DOM 都添加了计算得到的属性,并且使用该属性重写 style 里的 CSS 定义,从而实现局部作用域效果

你动态插入的 DOM,本质上已经违背了数据驱动视图的理念,尽量不要这么做。当然这也不是绝对的。解决方法有这几种:

  1. 尝试改为使用模板方式生成动态内容

  2. 使用 this.$compile() 编译动态生成的 HTML 模板,再插入到 DOM 中

  3. 使用你当前的方式,使用全局 CSS 文件来定义样式。关于这点要注意 CSS 模块化管理、注意单页应用的样式污染问题

最简单的当然是使用 this.$compile()

回答:

去掉上面的 scoped,

或者用 Vue 生成。

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注