iT邦幫忙

2023 iThome 鐵人賽

DAY 2
0
Modern Web

菜鳥前端系列 第 2

Vue.js的實體物件

  • 分享至 

  • xImage
  •  

如何設定實體的選項。因應工作目前專案是Vue2,直接來舉例
一開始我們都需要先建立一個Vue的物件實體,並將物件套用進某個變數裡

const userManager = new Vue({
  data: {
    users: [
      { id: 1, name: 'Alice', age: 28 },
      { id: 2, name: 'Bob', age: 32 },
      { id: 3, name: 'Charlie', age: 22 },
    ]
  },
  methods: {
    addUser(newUser) {
      // 添加新用戶到用戶列表
      this.users.push(newUser);
    },
    deleteUser(userId) {
      // 刪除指定用戶
      this.users = this.users.filter(user => user.id !== userId);
    },
    getUserById(userId) {
      // 根據用戶ID獲取用戶信息
      return this.users.find(user => user.id === userId);
    }
  }
});

上面程式碼通過new Vue()創建了一個Vue實體物件userManager
趕專案中今天先這樣,明天見~


上一篇
第一天,在開始之前...
下一篇
條件與循環
系列文
菜鳥前端4
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言