Tutorial asas VUE3: Menggunakan penapis Vue.js untuk memproses data jadual

Vue.js ialah rangka kerja JavaScript yang sangat popular yang boleh membantu kami membina aplikasi web berprestasi tinggi dan boleh diselenggara. Dalam Vue.js, penapis ialah alat yang sangat berguna untuk bekerja dengan data, terutamanya apabila bekerja dengan data jadual. Artikel ini akan memperkenalkan cara menggunakan penapis Vue.js untuk memproses data jadual.

1. Gambaran keseluruhan penapis Vue.js

Penapis ialah cara pemprosesan data yang membolehkan kami menukar data input kepada format output yang diperlukan. Dalam Vue.js, penapis ialah fungsi global atau fungsi contoh Vue yang boleh digunakan dalam templat apabila data perlu diubah.

Terdapat dua jenis penapis Vue.js: penapis global dan penapis tempatan. Penapis global boleh digunakan secara global, penapis tempatan hanya boleh digunakan dalam tika Vue.

2. Gunakan penapis Vue.js untuk memproses data jadual

Andaikan kami mempunyai jadual yang mengandungi data pengguna, yang mengandungi nama pengguna, alamat e-mel dan tarikh pendaftaran. Kami ingin memformat tarikh pendaftaran dan mengisih jadual mengikut tarikh pendaftaran.

Pertama, tentukan penapis tarikh global Penapis dalam contoh Vue:

Vue.filter('dateFilter', function(value) {
  if (!value) return ''
  return moment(value).format('YYYY/MM/DD')
})

Dalam kod di atas, kami menggunakan perpustakaan moment.js untuk menukar rentetan tarikh kepada objek tarikh dan menggunakan format ( ) kaedah memformatkannya ke dalam format 'YYYY/MM/DD'.

Seterusnya, gunakan penapis dalam templat jadual:

<table>
  <thead>
    <tr>
      <th>用户名</th>
      <th>邮箱</th>
      <th @click="sortTable('registerDate')">注册日期</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="user in sortedUsers">
      <td>{{ user.name }}</td>
      <td>{{ user.email }}</td>
      <td>{{ user.registerDate | dateFilter }}</td>
    </tr>
  </tbody>
</table>

Dalam kod di atas, kami menggunakan aksara paip '|' untuk menghantar medan daftarTarikh pengguna ke penapis dateFilter. Vue secara automatik akan memanggil fungsi dateFilter, melepasi registerDate sebagai parameter.

Perhatikan bahawa apabila menggunakan penapis dalam templat, susunan ia diproses boleh menjejaskan keputusan. Dalam kod di atas, kami mula-mula mengisih jadual mengikut tarikh pendaftaran (sortedUsers) dan kemudian memformat tarikh.

Seterusnya, kita perlu melaksanakan kaedah sortTable(). Kaedah ini mengisih jadual berdasarkan tajuk pengepala yang diklik.

sortTable(column) {
  if (this.sortColumn === column) {
    this.sortOrder = this.sortOrder * -1
  } else {
    this.sortColumn = column
    this.sortOrder = 1
  }
  this.users.sort((a, b) => {
    let x = a[column]
    let y = b[column]
    if (column === 'registerDate') {
      x = moment(x)
      y = moment(y)
    }
    if (x < y) {
      return -1 * this.sortOrder
    } else if (x > y) {
      return 1 * this.sortOrder
    } else {
      return 0
    }
  })
}

Dalam kod di atas, kami menggunakan kaedah sort() untuk mengisih jadual. Jika nama lajur ialah 'registerDate', kami menukar rentetan tarikh kepada objek tarikh dan mengisih mengikut objek tarikh.

Akhir sekali, kita perlu mentakrifkan data pengguna dalam contoh Vue dan memuatkan data pengguna dalam fungsi yang dicipta().

data: {
  users: [],
  sortColumn: '',
  sortOrder: 1
},
created() {
  axios.get('/api/users').then(response => {
    this.users = response.data
  })
}

Dalam kod di atas, kami menggunakan Axios untuk memuatkan data pengguna daripada pelayan bahagian belakang.

3. Ringkasan

Penapis Vue.js ialah alat yang sangat berguna yang boleh membantu kami memproses pelbagai jenis data. Dalam artikel ini, kami membincangkan cara menggunakan penapis Vue.js untuk memproses data jadual. Kami mentakrifkan penapis global yang menukar rentetan tarikh kepada format yang ditentukan dan menggunakan penapis ini untuk menukar data tarikh pendaftaran pengguna. Selain itu, kami juga memperkenalkan cara melaksanakan fungsi pengisihan jadual. Melalui mengkaji artikel ini, saya percaya anda telah memahami penggunaan asas penapis Vue.js, dan saya harap ia akan membantu kerja pembangunan masa depan anda.

Atas ialah kandungan terperinci Tutorial asas VUE3: Menggunakan penapis Vue.js untuk memproses data jadual. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!