Vue文件中的資料視覺化函數應用實例-Vue.js-PHP中文網

Vue文件中的資料視覺化函數應用實例

WBOY

發布： 2023-06-20 16:46:27

原創

1394 人瀏覽過

Vue.js是一種流行的JavaScript框架，用於建立互動式Web使用者介面。它提供了一個靈活的資料綁定係統和簡單的方法來組合以及重複使用組件。

在Vue.js文件中，JavaScript中的資料視覺化用法稱為計算屬性。在本文中，我們將介紹一些Vue.js中的計算屬性，並展示如何利用它們來創建使用資料視覺化的實際應用程式。

什麼是計算屬性

計算屬性是Vue.js中的一個特殊函數，用於計算和傳回基於響應式依賴的動態資料綁定值。它們會根據Vue.js實例中已定義的屬性來自動更新結果。這意味著當依賴屬性發生變化時，計算屬性將自動重新計算其值。計算屬性的語法如下：

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

登入後複製

在上面的語法中，計算屬性透過屬性名稱定義，其值為函數，傳回計算結果。

例如，假設我們有以下Vue.js實例：

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

登入後複製

在這個範例中，我們定義了計算屬性fullName，其傳回的值是 firstName和lastName的組合。

使用計算屬性實現資料過濾

利用計算屬性，我們可以更容易實現基於特定條件的資料過濾。例如，假設我們有以下的Vue.js實例：

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
        })
      }
    }
  }
})

登入後複製

在此範例中，我們定義了一個名為filter的狀態變量，它可以取以下三個值之一： all（全部）、done（已完成）和undone（未完成）。我們也定義了一個名為filteredTodos的計算屬性，根據不同的篩選條件，計算並傳回我們過濾後的任務陣列。

現在，我們只需要將指向不同篩選條件的按鈕綁定到filter屬性即可完成任務過濾。例如：

<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>

登入後複製

在這個範例中，我們使用v-for指令將filteredTodos中每個任務渲染到HTML中。當我們按一下篩選條件按鈕時，filter會被賦予對應的篩選條件，計算屬性將會重新計算並更新任務清單。

使用計算屬性實作排序和篩選

除了篩選外，我們還可以使用計算屬性將資料依照實際需求排序。例如，假設我們有以下Vue.js實例：

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
    }
  }
})

登入後複製

在本案例中，我們定義了一個名為items的狀態變量，每個項目都有一個名為name和price的屬性。同時，我們也定義了三個狀態：sortKey、sortReverse和filterKey。

我們也定義了一個名為sortedItems的計算屬性，該屬性根據排序和篩選條件自動計算和排序items陣列。我們可以透過點擊表頭自動切換排序和降序，透過輸入文字過濾陣列。

<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>

登入後複製

在此範例中，我們使用了v-model指令來實作由使用者輸入的篩選器。我們也使用了兩個按鈕來切換排序條件。