如何在 vue 组件中的 createElement 之后应用 css 样式？

Posted 2023-02-23

【中文标题】如何在 vue 组件中的 createElement 之后应用 css 样式？

【英文标题】：How to apply css style after createElement in vue component?

【发布时间】：2019-01-23 03:07:48

【问题描述】：

<template>
  <div id="body">
    <button type="button" @click="create">Create</button>
  </div>
</template>
<script>
  export default 
    methods: 
      create () 
        let e = document.createElement('input');
        e.classList.add('input-test');
        e.setAttribute('type', 'text');
        e.setAttribute('value', 'test');
        document.getElementById('body').appendChild(e);
      
    
  
</script>
<style scoped>
.input-test 
  color: red;

</style>

我试过这段代码。但是没有应用输入测试样式。 为什么不能应用于元素？ 当我删除样式标签的作用域时，它可以工作。

【参考方案1】：

如果您查看 vue 如何处理样式范围，您会发现所有元素都会获得一个范围标识符，该标识符将添加到您的范围 css 中。任何新创建的元素都不会被 vue 转译，因此它不会获得所需的范围标识符。

如果您只想在单击按钮时显示一个元素，则应将其添加到 dom 并仅在单击时显示它 v-if directive

【参考方案2】：

我通过深度选择器解决了 deep selectors

【参考方案3】：

我在这里找到了解决方案：https://***.com/a/49926050/5899698

在 createElement 的结果元素中，您可以使用以下方法添加作用域 css 标识符：

e.setAttribute(this.$options._scopeId, '');

【讨论】：

我已经解决了，但你的回答也很有帮助。非常感谢。