如何绑定到列表中的元素

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
    <input v-model="newItem" placeholder="Add new item">
    <button @click="addItem">Add</button>
  </div>
</template>

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

export default {
  setup() {
    const items = ref([
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      { id: 3, name: 'Item 3' }
    ]);
    const newItem = ref('');

    function addItem() {
      if (newItem.value.trim()) {
        const id = items.value.length + 1;
        items.value.push({ id, name: newItem.value });
        newItem.value = '';
      }
    }

    return {
      items,
      newItem,
      addItem
    };
  }
};
</script>