vue 删除选中的数组的那一项

你可以使用 JavaScript 中的 splice() 方法来删除数组中的指定项。假设你有一个数组 items，要删除第 i 项，可以使用以下代码：

items.splice(i, 1);

其中，第一个参数 i 代表要删除的项的索引，第二个参数 1 代表要删除的项的数量。这个方法会将删除的项从原数组中移除，并返回一个包含被删除项的新数组。

如果你想删除多个项，可以将第二个参数设置为要删除的项的数量，例如：

items.splice(i, n);

其中，n 代表要删除的项的数量。如果你想删除的项是通过用户选择的，可以将 i 和 n 的值存储在变量中，然后在用户点击删除按钮时使用这些变量来删除数组中的项。

相关问题

2.选择喜欢的 目标: 用户选择栏目, 把用户选中的栏目信息在下面列表显示出来 提示: vue变量是数组类型, 绑定在checkbox标签上

在Vue.js中，实现这个功能通常会涉及到以下几个步骤：

1. **创建数据结构**：首先，在`data()`函数中定义一个数组类型的Vue变量，比如`selectedColumns`，它将用于存储用户勾选的栏目。

data() {
  return {
    selectedColumns: [], // 初始时为空数组，表示无栏目被选中
    columnsList: [
      { id: '1', title: '栏目一' },
      { id: '2', title: '栏目二' },
      { id: '3', title: '栏目三' }, // ...其他栏目项
    ]
  };
}

2. **绑定checkbox到数据**：在HTML模板中，遍历`columnsList`，为每个栏目创建一个`<input type="checkbox">`元素，并将其`value`绑定到栏目的`id`属性，同时将`v-model`指令绑定到`selectedColumns`数组，以便监听用户的勾选状态。

<div v-for="(column, index) in columnsList" :key="index">
  <input type="checkbox" :value="column.id" v-model="selectedColumns">
  <label>{{ column.title }}</label>
</div>

3. **显示已选栏目**：当用户完成选择后，可以在某个位置如`<ul>`或`<p>`标签中动态渲染已选的栏目标题，通过判断`selectedColumns`数组中是否包含某一项的`id`。

<ul>
  <li v-for="selectedColumn in selectedColumns" :key="selectedColumn.id">
    {{ selectedColumn.title }}
  </li>
</ul>

4. **提示及操作**：为了提示用户选中的栏目以及提供进一步的操作，你可以添加相应的事件监听和消息提示，例如点击“确定”按钮后显示选定的栏目。

vue中将父组件的数组传递给子组件，在子组件中v-for循环出来，并默认选中第一项

可以在父组件中通过 props 将数组传递给子组件，然后在子组件中使用 v-for 循环出来，同时使用 v-model 绑定一个选中的值。具体实现如下：

父组件中：

<template>
  <div>
    <child-component :options="options" v-model="selectedOption"></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: ['option1', 'option2', 'option3'],
      selectedOption: 'option1'
    }
  }
}
</script>

子组件中：

<template>
  <div>
    <select v-model="selectedOption">
      <option v-for="option in options" :value="option">{{ option }}</option>
    </select>
  </div>
</template>

<script>
export default {
  props: ['options', 'value'],
  data() {
    return {
      selectedOption: ''
    }
  },
  mounted() {
    if (this.value) {
      this.selectedOption = this.value
    } else {
      this.selectedOption = this.options[0]
    }
  },
  watch: {
    value(newValue) {
      this.selectedOption = newValue
    }
  },
  computed: {
    listeners() {
      return {
        ...this.$listeners,
        input: event => this.$emit('input', event.target.value)
      }
    }
  }
}
</script>

在子组件中，我们使用了 v-model 绑定了一个 selectedOption 变量，并在 mounted 钩子函数中判断了 value（也就是父组件中的 v-model 绑定的值）是否存在，如果存在则将其赋值给 selectedOption，否则将 options 数组中的第一个元素作为默认选中项。

同时，我们在子组件中通过 watch 监听了 value 的变化，并在变化时将其赋值给 selectedOption。

最后，我们在 computed 中返回了 listeners 对象，将 input 事件映射到了子组件中的 $emit('input', event.target.value) 方法，这样在父组件中就可以使用 v-model 双向绑定 selectedOption 变量了。