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

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

Answer 2

如一楼所述，唯一不可多选。不过你可以选择使用 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 3

使用 v-for 中的模板引用 即可，官方示例如下：

<script setup>
import { ref, onMounted } from "vue";

const list = ref([
  /* ... */
]);

const itemRefs = ref([]);

onMounted(() => console.log(itemRefs.value));
</script>

<template>
  <ul>
    <li v-for="item in list" ref="itemRefs">
      {{ item }}
    </li>
  </ul>
</template>

应该注意的是，ref 数组 并不保证 与源数组相同的顺序。