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 byproperty 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 propertyfullName, whose returned value isThe combination of firstNameandlastName.

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 namedfilter, which can take one of the following three values : all, done, and undone. We also define a calculated property namedfilteredTodos, 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 thefilterproperty to complete the task filtering. For example:

全部 已完成 未完成 
 
 {{ todo.text }} 
 

In this example, we use thev-fordirective to render each task infilteredTodosinto HTML. When we click a filter condition button,filterwill 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 nameditems, and each item has a state variable named ## Properties of #nameandprice. At the same time, we also define three states:sortKey,sortReverseandfilterKey.

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.

 
 
 
  商品名称  
 
  商品价格  
 
 
 
  
 
 
 
 
 
 
{{ item.name }}
 
{{ item.price }}
 
 
 

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

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!