vue3修改样式的问题？

Question

<div ref="allRef">   <div ref="oneRef">1</div>   <div ref="oneRef">2</div>   <div ref="oneRef">3</div>   <div ref="oneRef">4</div>   <div ref="oneRef">5</div>   <div ref="oneRef">6</div>   <div ref="oneRef">7</div>   <div ref="oneRef">8</div>   <div ref="oneRef">9</div>                 </div>

setup(){            const allRef = ref(null)            const oneRef=ref(null)            const setx=(index)=>{                switch (index) {                    case 0:                        allRef.value.style.display='block'                        oneRef.value.style.backgroundColor='#D3EAFD'                        oneRef.value.style.border='1px solid #C1C1C1'                        oneRef.value.style.padding='20px'                        oneRef.value.style.fontSize='30px'                        oneRef.value.style.textAlign='center'                        break;                                    }            }            return{                setx,                allRef,                oneRef            }        }

为什么执行

allRef.value.style.display='block'                        oneRef.value.style.backgroundColor='#D3EAFD'                        oneRef.value.style.border='1px solid #C1C1C1'                        oneRef.value.style.padding='20px'                        oneRef.value.style.fontSize='30px'                        oneRef.value.style.textAlign='center'

时只有最后一个元素发生了变化？

Answer 1

如一楼所述，唯一不可多选。不过你可以选择使用 children 获取到所有子元素，然后依次进行修改。

allRef.value.style.display = 'block';const children = allRef.value.children;for (const ele of children) {  ele.value.style.backgroundColor = '#D3EAFD';  ele.value.style.border = '1px solid #C1C1C1';  ele.value.style.padding = '20px';  ele.value.style.fontSize = '30px';  ele.value.style.textAlign = 'center';}

又或者，通过修改 allRef 的类，来控制子元素样式，在这个场景中更为合适。

Answer 2

ref是唯一的，和元素的ID类似，你这样写相当于只选中了最后一条同名的ID记录。