vue3 数组赋值

// Vue 3 数组赋值示例

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
    <button @click="updateItems">更新数组</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 定义一个响应式的数组
    const items = ref(['苹果', '香蕉', '橙子']);

    // 更新数组的方法
    const updateItems = () => {
      // 直接赋值新的数组
      items.value = ['草莓', '葡萄', '西瓜'];
    };

    return {
      items,
      updateItems
    };
  }
};
</script>

解释说明：

1. 定义响应式数组：使用 ref 创建一个响应式的数组 items，初始值为 ['苹果', '香蕉', '橙子']。
2. 更新数组：通过 updateItems 方法，直接对 items.value 赋值新的数组 ['草莓', '葡萄', '西瓜']。由于 items 是响应式的，Vue 会自动检测到变化并更新视图。
3. 模板渲染：使用 v-for 指令遍历 items 数组，并在页面上显示每个元素。点击按钮时调用 updateItems 方法更新数组内容。