Contoh aplikasi fungsi visualisasi data dalam dokumen Vue

Vue.js ialah rangka kerja JavaScript yang popular untuk membina antara muka pengguna web interaktif. Ia menyediakan sistem pengikatan data yang fleksibel dan cara mudah untuk mengarang dan menggunakan semula komponen.

Dalam dokumentasi Vue.js, penggunaan visualisasi data dalam JavaScript dipanggil sifat dikira. Dalam artikel ini, kami akan memperkenalkan beberapa sifat yang dikira dalam Vue.js dan menunjukkan cara memanfaatkannya untuk mencipta aplikasi dunia sebenar yang menggunakan visualisasi data.

Apakah itu sifat yang dikira?

Sifat yang dikira ialah fungsi khas dalam Vue.js yang digunakan untuk mengira dan mengembalikan nilai pengikatan data dinamik berdasarkan kebergantungan reaktif. Mereka mengemas kini hasil secara automatik berdasarkan sifat yang ditakrifkan dalam tika Vue.js. Ini bermakna apabila harta bergantung berubah, harta yang dikira akan mengira semula nilainya secara automatik. Sintaks harta yang dikira adalah seperti berikut:

computed: {
  // 计算属性的名称
  属性名: function() {
    // 计算属性的计算逻辑
    return 计算结果
  }
}

Dalam sintaks di atas, sifat yang dikira ditakrifkan oleh nama sifat dan nilainya ialah fungsi yang mengembalikan hasil pengiraan.

Sebagai contoh, katakan kita mempunyai contoh Vue.js berikut:

new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

Dalam contoh ini, kita mentakrifkan sifat yang dikira Nama Penuh, yang nilainya dikembalikan ialah Gabungan firstName dan lastName.

Gunakan sifat yang dikira untuk melaksanakan penapisan data

Menggunakan sifat yang dikira, kami boleh melaksanakan penapisan data dengan lebih mudah berdasarkan syarat tertentu. Sebagai contoh, katakan kita mempunyai contoh Vue.js berikut:

new Vue({
  el: '#app',
  data: {
    todos: [
      { text: '任务 1', done: true },
      { text: '任务 2', done: false },
      { text: '任务 3', done: false }
    ],
    filter: 'all'
  },
  computed: {
    filteredTodos: function () {
      if (this.filter === 'all') {
        return this.todos
      } else if (this.filter === 'done') {
        return this.todos.filter(function (todo) {
          return todo.done
        })
      } else if (this.filter === 'undone') {
        return this.todos.filter(function (todo) {
          return !todo.done
        })
      }
    }
  }
})

Dalam contoh ini, kita mentakrifkan pembolehubah keadaan dipanggil penapis yang boleh mengambil salah satu daripada tiga nilai berikut : semua, dilakukan, dan dibatalkan. Kami juga mentakrifkan atribut terkira bernama filteredTodos untuk mengira dan mengembalikan tatasusunan tugas kami yang ditapis berdasarkan keadaan penapis yang berbeza.

Kini, kita hanya perlu mengikat butang yang menghala ke keadaan penapis yang berbeza pada atribut penapis untuk menyelesaikan penapisan tugas. Contohnya:

<button @click="filter = 'all'">全部</button>
<button @click="filter = 'done'">已完成</button>
<button @click="filter = 'undone'">未完成</button>
<ul>
  <li v-for="todo in filteredTodos">
    {{ todo.text }}
  </li>
</ul>

Dalam contoh ini, kami menggunakan arahan v-for untuk menjadikan setiap tugasan dalam filteredTodos ke dalam HTML. Apabila kita mengklik butang keadaan penapis, penapis akan diberikan keadaan penapis yang sepadan dan atribut yang dikira akan mengira semula dan mengemas kini senarai tugasan.

Gunakan sifat terkira untuk melaksanakan pengisihan dan penapisan

Selain penapisan, kami juga boleh menggunakan sifat terkira untuk mengisih data mengikut keperluan sebenar. Sebagai contoh, katakan kita mempunyai contoh Vue.js berikut:

new Vue({
  el: '#app',
  data: {
    items: [
      { name: 'A', price: 6.5 },
      { name: 'B', price: 2 },
      { name: 'C', price: 5 },
      { name: 'D', price: 4.2 },
      { name: 'E', price: 8 },
    ],
    sortKey: 'name',
    sortReverse: false,
    filterKey: ''
  },
  computed: {
    sortedItems: function () {
      var key = this.sortKey
      var reverse = this.sortReverse ? -1 : 1

      var items = this.items.slice().sort(function (a, b) {
        a = a[key]
        b = b[key]
        return reverse * ((a > b) - (b > a))
      })

      if (this.filterKey) {
        items = items.filter(function (item) {
          return (
            item.name.toLowerCase().indexOf(this.filterKey.toLowerCase()) !== -1 ||
            item.price.toString().indexOf(this.filterKey) !== -1
          )
        }.bind(this))
      }

      return items
    }
  }
})

Dalam kes ini, kita mentakrifkan pembolehubah keadaan bernama item dan setiap item mempunyai pembolehubah keadaan bernama Atribut daripada nama dan harga. Pada masa yang sama, kami juga mentakrifkan tiga keadaan: sortKey, sortReverse dan filterKey.

Kami juga mentakrifkan sifat terkira yang dipanggil sortedItems, yang secara automatik mengira dan mengisih tatasusunan item berdasarkan keadaan pengisihan dan penapisan. Kami boleh bertukar secara automatik antara urutan pengisihan dan menurun dengan mengklik pada pengepala jadual, dan menapis tatasusunan dengan memasukkan teks.

<table>
  <thead>
    <tr>
      <th>
        <button @click="sortKey = 'name'; sortReverse = !sortReverse">
          商品名称
        </button>
      </th>
      <th>
        <button @click="sortKey = 'price'; sortReverse = !sortReverse">
          商品价格
        </button>
      </th>
    </tr>
    <tr>
      <th>
        <input v-model="filterKey" placeholder="商品名称或价格" />
      </th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="item in sortedItems">
      <td>{{ item.name }}</td>
      <td>{{ item.price }}</td>
    </tr>
  </tbody>
</table>

Dalam contoh ini, kami menggunakan arahan v-model untuk melaksanakan penapis yang dimasukkan oleh pengguna. Kami juga menggunakan dua butang untuk menogol kriteria pengisihan.

Kesimpulan

Dengan menggunakan sifat yang dikira, kami boleh membina aplikasi Vue.js dengan visualisasi data dengan mudah. Sifat yang dikira berinteraksi dengan sistem reaktif Vue.js, sekali gus menjadikan penapis dan penyisih data kami lebih fleksibel dan lebih mudah untuk digunakan.

Apabila kami membina aplikasi dengan visualisasi data, sifat yang dikira ialah cara terbaik untuk melaksanakan manipulasi data dan pemaparan paparan. Contoh di atas menunjukkan beberapa ciri asas dan lanjutan bagi sifat yang dikira untuk membantu anda mula menggunakannya dalam aplikasi Vue.js anda.

Atas ialah kandungan terperinci Contoh aplikasi fungsi visualisasi data dalam dokumen Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!