Vueドキュメントでのデータ可視化機能適用例

Vue.js は、インタラクティブな Web ユーザー インターフェイスを構築するための人気のある JavaScript フレームワークです。柔軟なデータ バインディング システムと、コンポーネントを構成して再利用するための簡単な方法を提供します。

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 という名前の状態変数を定義します。この変数は、次の 3 つの値のいずれかをとります。完了し、元に戻ります。また、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 という名前の状態変数を定義し、各項目には ## という名前の状態変数があります。 #名前と価格。同時に、sortKey、sortReverse、filterKey の 3 つの状態も定義します。

また、

sortedItems という計算プロパティも定義します。これは、並べ替え条件とフィルター条件に基づいて項目配列を自動的に計算して並べ替えます。テーブルのヘッダーをクリックすることで並べ替えと降順を自動的に切り替えたり、テキストを入力して配列をフィルターしたりできます。

<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 ディレクティブを使用して、ユーザーが入力したフィルターを実装しました。また、並べ替え基準を切り替えるために 2 つのボタンも使用しました。

結論

計算プロパティを使用すると、データ視覚化を備えた Vue.js アプリケーションを簡単に構築できます。計算されたプロパティは Vue.js のリアクティブ システムと対話するため、データ フィルターとソーターがより柔軟で使いやすくなります。

データ視覚化を使用してアプリケーションを構築する場合、計算プロパティはデータ操作とビューのレンダリングを実装するための優れた方法です。上記の例は、Vue.js アプリケーションで計算プロパティの使用を開始するのに役立つ、計算プロパティのいくつかの基本機能と高度な機能を示しています。

以上がVueドキュメントでのデータ可視化機能適用例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。