Data visualization function application examples in Vue documents

Vue.js is a popular JavaScript framework for building interactive web user interfaces. It provides a flexible data binding system and easy way to compose and reuse components.

In the Vue.js documentation, data visualization usage in JavaScript is called computed properties. In this article, we will introduce some computed properties in Vue.js and show how to leverage them to create real-world applications that use data visualization.

What is a computed property

A computed property is a special function in Vue.js that is used to calculate and return dynamic data binding values ​​based on responsive dependencies. They automatically update the results based on the properties defined in the Vue.js instance. This means that when the dependent property changes, the calculated property will automatically recalculate its value. The syntax of the calculated property is as follows:

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

In the above syntax, the calculated property is defined by property name, and its value is a function that returns the calculation result.

For example, assume we have the following Vue.js instance:

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

In this example, we define the computed property fullName, whose returned value is The combination of firstName and lastName.

Use computed properties to implement data filtering

Using computed properties, we can more easily implement data filtering based on specific conditions. For example, assume we have the following Vue.js instance:

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

In this example, we define a state variable named filter, which can take one of the following three values : all, done, and undone. We also define a calculated property named filteredTodos, which calculates and returns our filtered task array based on different filter conditions.

Now, we only need to bind the buttons pointing to different filter conditions to the filter property to complete the task filtering. For example:

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

In this example, we use the v-for directive to render each task in filteredTodos into HTML. When we click a filter condition button, filter will be assigned the corresponding filter condition, and the calculated attribute will recalculate and update the task list.

Use computed properties to implement sorting and filtering

In addition to filtering, we can also use computed properties to sort data according to actual needs. For example, let's say we have the following Vue.js instance:

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

In this case, we define a state variable named items, and each item has a state variable named ## Properties of #name and price. At the same time, we also define three states: sortKey, sortReverse and filterKey.

We also define a calculated property called

sortedItems, which automatically calculates and sorts the items array based on sorting and filtering conditions. We can automatically switch between sorting and descending order by clicking on the table header, and filter the array by entering text.

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

In this example, we used the

v-model directive to implement a filter entered by the user. We also used two buttons to toggle the sorting criteria.

Conclusion

By using computed properties, we can easily build Vue.js applications with data visualization. Computed properties interact with Vue.js’ reactive system, thus making our data filters and sorters more flexible and easier to use.

When we are building applications with data visualization, computed properties are an excellent way to implement data manipulation and view rendering. The examples above demonstrate some basic and advanced features of computed properties to help you get started using them in your Vue.js applications.

The above is the detailed content of Data visualization function application examples in Vue documents. For more information, please follow other related articles on the PHP Chinese website!