我正在使用Vue.js制作一个Web服务 . 我想要做的是更改从父组件的属性接收的元素的样式 . 例如：

（有省略的行）

Parent component

<template>
<div>
    <child v-bind:styles="styles"></child>
<div>
</template>
<script>
export default {
    components: { child },
    data() {
        return {
            styles: { width:'100px', height:'70px' }
        };
    }
}
</script>

styles 对象的 width 和 height 可以更改，即由使用父组件的任何人决定 .

Chlid component

<template>
<div>
    <div class="iterDiv" v-for="(item, index) in arr" v-key="index">{{ item }}</div>
</div>
</template>
<script>
export default {
    name: 'Child',
    props: [ 'styles' ],
    data() {
        return {
            arr: [1, 2, 3, 4, 5]
        };
    }
}
</script>

并且子组件由迭代元素组成，其具有类 iterDiv 用于选择，如 document.getElementsByClassName('iterDiv') .

现在，我想更改Child Component的div元素，具有 iterDiv 类名，样式为 styles 动态 .

有什么办法吗？谢谢 .

如果已经有答案，我错过了，让我知道 . 我会删除这个问题 .

css vue.js vue-component