Vue.js -使用列表生成控制主要内容的导航栏和复选框行

<template>
  <div>
    <ul>
      <li v-for="item in navItems" :key="item.id">
        <a :href="item.url">{{ item.title }}</a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navItems: [
        { id: 1, title: '首页', url: '/home' },
        { id: 2, title: '产品', url: '/products' },
        { id: 3, title: '关于', url: '/about' },
      ]
    };
  }
};
</script>

<template>
  <div>
    <ul>
      <li v-for="item in checkboxItems" :key="item.id">
        <input type="checkbox" :value="item.value" v-model="selectedItems">
        <label>{{ item.label }}</label>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkboxItems: [
        { id: 1, label: '选项1', value: 'option1' },
        { id: 2, label: '选项2', value: 'option2' },
        { id: 3, label: '选项3', value: 'option3' },
      ],
      selectedItems: [],
    };
  }
};
</script>