Question

<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>

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

Answer 1

如果您查看vue如何处理样式范围，您将看到所有元素都获得了范围的标识符，该标识符将添加到您的范围CSS。任何新创建的元素都不会被vue编译，因此不会获得所需的作用域标识符。

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

Answer 2

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

Answer 3

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

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

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

如何在Vue组件中的createElement之后应用CSS样式？

3 个答案: