如何利用Vue为您的项目添加和删除功能

2023-12-09 04:03:23

添加功能

在 Vue.js 中，您可以使用 v-model 指令将用户输入绑定到数据属性。当用户在输入框中输入文本时，v-model 指令会自动将该文本更新到数据属性中。

以下示例演示了如何使用 v-model 指令添加新品牌：

<template>
  <div>
    <input v-model="newBrand" placeholder="Enter a new brand">
    <button @click="addBrand">Add Brand</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newBrand: '',
      brands: []
    }
  },
  methods: {
    addBrand() {
      this.brands.push(this.newBrand)
      this.newBrand = ''
    }
  }
}
</script>

删除功能

要删除品牌，您可以使用 splice() 方法从 brands 数组中删除该品牌。

以下示例演示了如何删除品牌：

<template>
  <div>
    <ul>
      <li v-for="brand in brands" :key="brand">
        {{ brand }}
        <button @click="removeBrand(brand)">Remove</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      brands: ['Apple', 'Samsung', 'Google']
    }
  },
  methods: {
    removeBrand(brand) {
      const index = this.brands.indexOf(brand)
      this.brands.splice(index, 1)
    }
  }
}
</script>

数组过滤

数组过滤是一种强大的工具，可让您根据条件过滤数组中的元素。在 Vue.js 中，您可以使用 v-for 指令和 filter 过滤器来过滤数组。

以下示例演示了如何使用 v-for 指令和 filter 过滤器根据条件过滤品牌：

<template>
  <div>
    <input v-model="filterText" placeholder="Filter brands">
    <ul>
      <li v-for="brand in brands | filterBy filterText" :key="brand">
        {{ brand }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      brands: ['Apple', 'Samsung', 'Google', 'Microsoft', 'Sony'],
      filterText: ''
    }
  },
  filters: {
    filterBy(brands, filterText) {
      return brands.filter(brand => brand.toLowerCase().includes(filterText.toLowerCase()))
    }
  }
}
</script>

私有过滤器

私有过滤器只适用于组件本身，而全局过滤器则适用于整个应用程序。

以下示例演示了如何创建私有过滤器：

<template>
  <div>
    <input v-model="filterText" placeholder="Filter brands">
    <ul>
      <li v-for="brand in brands | filterBy filterText" :key="brand">
        {{ brand }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      brands: ['Apple', 'Samsung', 'Google', 'Microsoft', 'Sony'],
      filterText: ''
    }
  },
  filters: {
    filterBy(brands, filterText) {
      return brands.filter(brand => brand.toLowerCase().includes(filterText.toLowerCase()))
    }
  }
}
</script>

全局过滤器

全局过滤器适用于整个应用程序。要创建全局过滤器，您可以使用 Vue.filter() 方法。

以下示例演示了如何创建全局过滤器：

Vue.filter('filterBy', (brands, filterText) => {
  return brands.filter(brand => brand.toLowerCase().includes(filterText.toLowerCase()))
})

现在，您可以在任何组件中使用 filterBy 过滤器：

<template>
  <div>
    <input v-model="filterText" placeholder="Filter brands">
    <ul>
      <li v-for="brand in brands | filterBy filterText" :key="brand">
        {{ brand }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      brands: ['Apple', 'Samsung', 'Google', 'Microsoft', 'Sony'],
      filterText: ''
    }
  }
}
</script>