HTML/vue.js -选中时禁用选择列表

基础概念

HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。Vue.js 是一个用于构建用户界面的渐进式JavaScript框架，它允许开发者通过声明式的数据绑定和组合的视图组件来构建复杂的单页应用（SPA）。

类型

在Vue.js中，可以通过条件渲染来控制列表项的选中状态和禁用状态。这通常涉及到使用v-bind或简写为:来动态绑定属性，以及使用v-for来遍历列表。

应用场景

当需要根据某些条件（如用户权限、数据状态等）来禁用选择列表中的某些选项时，可以使用Vue.js来实现这一功能。

问题解决

假设我们有一个选择列表，用户选中某个选项后，该选项应被禁用，以防止再次被选中。

HTML部分

<select v-model="selected" @change="disableSelected">
  <option v-for="item in items" :key="item.value" :value="item.value" :disabled="item.disabled">
    {{ item.text }}
  </option>
</select>

Vue.js部分

new Vue({
  el: '#app',
  data: {
    selected: null,
    items: [
      { text: 'Option 1', value: '1', disabled: false },
      { text: 'Option 2', value: '2', disabled: false },
      { text: 'Option 3', value: '3', disabled: false }
    ]
  },
  methods: {
    disableSelected() {
      this.items.forEach(item => {
        if (item.value === this.selected) {
          item.disabled = true;
        } else {
          item.disabled = false;
        }
      });
    }
  }
});

在这个例子中，我们有一个下拉选择列表，每个选项都是通过v-for循环渲染的。当用户选择一个选项时，@change事件触发disableSelected方法，该方法会遍历所有选项，并将选中的选项设置为禁用状态。