Javascript 如何在vue组件中的createElement之后应用css样式？ 创造 导出默认值{ 方法：{ 创建（）{ 设e=document.createElement（'input'）； e、 添加（'input-test'）； e、 setAttribute（'type'，'text'）； e、 setAttribute（'value'，'test'）； document.getElementById（'body'）.appendChild（e）； } } } .输入测试{ 颜色：红色； }

我试过这个密码。但并没有应用输入测试样式。 为什么不能应用于元素？

---

当我删除样式标记处的作用域时，它会起作用。

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

如果只希望在单击按钮时显示元素，则应将其添加到dom中，并仅在单击时使用深度选择器解决的

v-If

I显示它

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