Shulou(Shulou.com)06/01 Report--

This article mainly shows you "how to achieve list rendering, sorting, filtering operation in Vue", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn how to achieve list rendering, sorting, filtering operation in Vue "this article.

1. List (rendering, sorting, filtering) 1.1 conditional rendering instructions

Here's a little trick:

If you are looking for an attribute that does not exist in the object, a undefined is returned. Using this point, whether it is v-show or v-if, if the value is equal to undefined, it will not be displayed. Assume that the sex attribute does not exist.

Gender: {{student.sex}}

1.1.1 v-show

The principle of 1.v-show: hide elements through display:none and remove the style display:none when conditions are met

two。 The suitable scenarios are: scenes with high switching frequency

3. You can get the element when you use v-show to hide the element, but v-if cannot get the element

1.1.2 v-if

The principle of 1.v-if: remove the entire node and add the node when the condition is met

2.v-else and v-else-if need to be used with v-if, but the structure cannot be destroyed.

You must write v-if first, for example:

V-if = "xxx" v-else = "xxx"-v-if = "xxx" v-else-if = "xxx" v-else = "xxx"

Applicable scenarios: scenes with low switching frequency

Template

The biggest feature is that it does not destroy the structure, but can only be used in conjunction with v-if.

1.1.3 the current value of n for the small case of v-if and v-show is: {{n}} Click me n plus 1 Hello! I'm box1. Hello! I'm box1. Hello! Box1, I'm box2, I'm box31, I'm box32, I'm box33 hhhhhhh / / only output values that meet conditions when they are met. For example, the output of this example is'I'm box31'. Hello! Guess who I am? I'm box4. Did you get it right? You're great! Vue.config.productionTip = false let vm = new Vue ({el:'# root', data: {n: 0,}}) 1.1.4 v-for (the principle of key)

Features:

1. You can traverse the array

two。 You can traverse objects

3. You can traverse strings

4. Can be traversed many times (with very little use)

5. If we don't write key, we use index by default

Function: used to display the data of the list

Syntax: v-for = "(item,index) in xxx": key= "yyy"

Principle of key: (very important)

1. The role of key in virtual DOM:

Key is the identity of virtual DOM object. When the data changes, Vue will generate [new virtual DOM] based on [new data]. Then Vue compares the difference between [new virtual DOM] and [old virtual DOM]. The comparison rules are as follows:

(1)。 The same key as the new virtual DOM was found in the old virtual DOM:

① if the content in the virtual DOM remains the same, directly use the previous real DOM

② if the content in the virtual DOM changes, a new real DOM is generated, and then the previous real DOM in the page is replaced

(2)。 The same key as the new virtual DOM is not found in the old virtual DOM. Create a new real DOM directly, and then render it to the page.

two。 Using index as the key will cause the following problems:

(1) if adding or deleting in reverse order destroys the sequential operation, unnecessary DOM updates will occur, which will lead to problems that will not be effective.

(2) if the input structure includes the DOM element of the input class, there will be update problems, such as: the data of the input box does not match, and so on.

3. Therefore, in the process of development, it is best to use a unique identifiable value as key, such as id,Date.now (), nanoid, package npm i nanoid, and so on.

1.2 list filtering

Use computed

{{value.name}}-- {{value.age}}-- {{value.gender}} Vue.config.productionTip = false let vm = new Vue ({el:'# root', data: {arr: [{id: "001", name: "Ma Dongmei", age: 18 Gender: "female"}, {id: "002", name: "Zhou Dongyu", age: 55, gender: "female"}, {id: "003", name: "Jay Chou", age: 30, gender: "male"}, {id: "004", name: "Alan Kwok", age: 30, gender: "male"} {id: "005", name: "Guo Degang", age: 30, gender: "male"},], keyword: ""} Computed: {filtername: {get () {return this.arr.filter ((currentval) = > {return currentval.name.indexOf (this.keyword)! =-1})} })

Use watch

{{value.name}}-- {{value.age}}-- {{value.gender}} / * share a method to remove duplicates in arrays var arr = [1GI 35pi 612 646 Min 51] var newarr = arr.filter ((val,index) = > {return arr.indexOf (val,0) = index}) console.log (newarr) Filter (function (current,index,arr) {return xxx})-return: write the filter condition-return the element that meets the condition indexOf:-the first parameter is the element to query-the second parameter is the location to start the index-the value returned is the index value of the current element If there is no element to query, the return is-1 * / Vue.config.productionTip = false let vm = new Vue ({el:'# root', data: {arr: [{id: "001", name: "Ma Dongmei", age: 18, gender: "female"} {id: 002, name: Zhou Dongyu, age: 55, gender: "female"}, {id: "003", name: "Jay Chou", age: 30, gender: "male"}, {id: "004", name: "Alan Guo", age: 30, gender: "male"} {id: "005", name: "Guo Degang", age: 30, gender: "male"},], keyword:'', filearr: []}, / * requirement: when entering a keyword Output related content ideas: 1. Get the data entered by the user 2. Filter whether the keywords entered are in the data * / / write watch with watch: {keyword: {immediate:true, handler (newval) Oldval) {this.filearr = this.arr.filter ((currentval) = > {return currentval.name.indexOf (newval)! = =-1 / * there is a detail here: indexOf returns 0 when it determines an empty string (not a space) So the whole list will come out, for example: "asdf" .indexOf ("") returns 0, so you need to use immediate * / for self-call. })}) 1.3 list sorters sort age ascending order, age descending order {{val.name}}-{{val.age}}-- {{val.gender}} Vue.config.productionTip = false let vm = new Vue ({el:'# root' Data: {arr: [{id: "001", name: "Ma Dongmei", age: 18, gender: "female"}, {id: "002", name: "Zhou Dongyu", age: 55, gender: "female"}, {id: "003", name: "Jay Chou" Age: 50, gender: "male"}, {id: "004", name: "Alan Kwok", age: 59, gender: "male"}, {id: "005", name: "Guo Degang", age: 30, gender: "male"},], keyword: "" Type:0} Computed: {filtername: {get () {let arr = this.arr.filter ((current) = > {return current.name.indexOf (this.keyword)! =-1}) arr.sort ((a) B) = > {/ * an is always before b if the returned value is greater than 0, then swap positions Less than or equal to 0 does not exchange position return a murb ascending order return bmura descending order * / if (this.type) {return this.type = = 1? B.age-a.age: a.age-b.age}}) return arr}) these are all the contents of the article "how to render, sort, and filter lists in Vue" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.