如何用 Vue 和 Bootstrap 搭建一个功能强大的列表增删应用

2023-06-30 06:06:03

在网页开发领域中，Vue 和 Bootstrap 是两种广泛使用的框架和库。Vue 提供了一个简洁的 API 用于处理数据绑定、计算属性、组件化等逻辑问题；而 Bootstrap 则提供了一套易于使用的 CSS 框架，帮助开发者快速构建美观一致的用户界面。本文将详细介绍如何使用这两种技术搭建一个功能强大的列表增删应用。

创建 Vue 实例

首先需要创建 Vue 实例来管理页面的数据和方法。Vue 实例能够监听数据的变化，并且自动更新视图。

new Vue({
  el: '#app',
  data: {
    items: [],
    newItem: ''
  },
  methods: {
    addItem() {
      this.items.push(this.newItem);
      this.newItem = '';
    },
    removeItem(index) {
      this.items.splice(index, 1);
    }
  }
});

这段代码中，items 数组用于存储列表项，newItem 则用来暂时保存用户输入的新增项内容。通过定义 addItem 和 removeItem 方法来添加和删除列表中的项目。

使用 Bootstrap 构建样式

接下来使用 Bootstrap 来美化这个应用的界面。Bootstrap 提供了丰富的组件如按钮、表单等，可以快速实现响应式布局。

<div id="app">
  <div class="input-group mb-3">
    <input type="text" v-model="newItem" class="form-control">
    <button @click="addItem()" class="btn btn-success">添加</button>
  </div>

  <ul class="list-group">
    <li
      v-for="(item, index) in items"
      :key="index"
      class="list-group-item d-flex justify-content-between align-items-center">
      {{ item }}
      <span @click="removeItem(index)" class="badge bg-danger">删除</span>
    </li>
  </ul>
</div>