使用Vue做一个简易的电话本

最新推荐文章于 2023-09-03 23:11:04 发布

村口王大爷Arthur

最新推荐文章于 2023-09-03 23:11:04 发布

阅读量440

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_44643924/article/details/130816379

版权

使用Vue做一个简易的电话本，实现对电话本中的数据进行增删改查

<!DOCTYPE html>
<html>
<head>
  <title>电话本</title>
  <!-- 引用Vue.js库文件 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
</head>
<body>
  <div id="app">
    <h1>电话本</h1>

    <!-- 添加联系人表单 -->
    <form @submit.prevent="addContact">
      <input type="text" v-model="newContact.name" placeholder="姓名" required>
      <input type="tel" v-model="newContact.phone" placeholder="电话号码" required>
      <button type="submit">添加联系人</button>
    </form>

    <!-- 联系人列表 -->
    <ul>
      <li v-for="(contact, index) in contacts" :key="index">
        <span>{{ contact.name }} - {{ contact.phone }}</span>
        <button @click="editContact(index)">编辑</button>
        <button @click="deleteContact(index)">删除</button>
      </li>
    </ul>
  </div>

  <!-- 创建Vue实例并绑定数据和方法 -->
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        contacts: [], // 电话本数据
        newContact: { name: '', phone: '' }, // 用于添加联系人的表单数据
        editIndex: -1 // 正在编辑的联系人索引
      },
      methods: {
        addContact() {
          this.contacts.push({ ...this.newContact });
          this.newContact.name = '';
          this.newContact.phone = '';
        },
        editContact(index) {
          this.editIndex = index;
          this.newContact = { ...this.contacts[index] };
        },
        saveContact() {
          this.contacts.splice(this.editIndex, 1, { ...this.newContact });
          this.cancelEdit();
        },
        cancelEdit() {
          this.editIndex = -1;
          this.newContact.name = '';
          this.newContact.phone = '';
        },
        deleteContact(index) {
          this.contacts.splice(index, 1);
        }
      }
    });
  </script>
</body>
</html>

在上述示例中，我们将Vue.js库文件通过CDN引入，然后创建了一个名为app的Vue实例，并将其绑定到id为app的HTML元素上。在Vue实例的data选项中，我们定义了电话本的数据contacts，以及用于添加联系人的表单数据newContact和正在编辑的联系人索引editIndex。在Vue实例的methods选项中，我们实现了添加联系人、编辑联系人、保存联系人、取消编辑和删除联系人的功能。

村口王大爷Arthur

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
使用Vue做一个简易的电话本

在上述示例中，我们将Vue.js库文件通过CDN引入，然后创建了一个名为app的Vue实例，并将其绑定到id为app的HTML元素上。在Vue实例的data选项中，我们定义了电话本的数据contacts，以及用于添加联系人的表单数据newContact和正在编辑的联系人索引editIndex。在Vue实例的methods选项中，我们实现了添加联系人、编辑联系人、保存联系人、取消编辑和删除联系人的功能。// 用于添加联系人的表单数据。// 正在编辑的联系人索引。
复制链接

扫一扫