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

In this article Xiaobian for you to introduce in detail "v-if and v-for case analysis in Vue", the content is detailed, the steps are clear, and the details are handled properly. I hope that this "v-if and v-for case analysis in Vue" article can help you solve your doubts.

First, the v-if command is used to conditionally render a piece of content. This piece of content is rendered only when the expression of the instruction returns a true value. The v-for command renders a list based on an array. The v-for instruction requires a special syntax in the form of item in items, where items is the source data array or object, and item is the alias of the array element being iterated. When v-for, it is recommended to set the key value and ensure that each key value is unique. This is convenient for the diff algorithm to optimize the usage of both {{item.label}} II. Priority v-if and v-for are instructions in the vue template system. When the vue template is compiled, the instruction system is converted into an executable render function.

The example writes a p tag, using both v-if and v-for

{{item.title}}

Create a vue instance to store isShow and items data

Const app = new Vue ({el: "# app", data () {return {items: [{title: "foo"}, {title: "baz"}]}}, computed: {isShow () {return this.items & & this.items.length > 0})

The code of the template instruction will be generated in the render function, and the rendering function can be obtained through app.$options.render.

Return anonymous () {with (this) {return _ c ('div', {attrs: {"id": "app"}}, _ l ((items), function (item) {return (isShow)? _ c (' pause, [_ v ("\ n" + _ s (item.title) + "\ n")): _ e ()}, 0)}

_ l is the list rendering function of vue, and an if judgment is made inside the function.

It is concluded that the priority of v-for is higher than that of v-if.

Then put v-for and v-if on different tags

{{item.title}}

Then output the render function

"anonymous () {with (this) {return _ c ('div', {attrs: {" id ":" app "}}, [(isShow)? [_ v ("\ n "), _ l ((items), function (item) {return _ c (' return, [_ v (_ s (item.title)])})]: _ e ()], 2)}}

At this time, we can see that when v-for and v-if act on different tags, they judge first, and then render the list.

Let's take a look at the vue source code again

Source location:\ vue-dev\ src\ compiler\ codegen\ index.js

Export function genElement (el: ASTElement, state: CodegenState): string {if (el.parent) {el.pre = el.pre | | el.parent.pre} if (el.staticRoot & &! el.staticProcessed) {return genStatic (el, state)} else if (el.once & & el.onceProcessed) {return genOnce (el, state)} else if (el.for & &! el.forProcessed) {return genFor (el) State)} else if (el.if & &! el.ifProcessed) {return genIf (el, state)} else if (el.tag = 'template' & &! el.slotTarget & &! state.pre) {return genChildren (el, state) | |' void 0'} else if (el.tag = 'slot') {return genSlot (el, state)} else {/ / component or element...} during if judgment V-for is prior to v-if to judge the final conclusion: v-for priority is higher than v-if, note 1. Never use v-if and v-for on the same element at the same time, resulting in a waste of performance (each rendering will loop first and then judge the condition) 2. To avoid this, nest template on the outer layer (page rendering does not generate dom nodes), do v-if judgment on this layer, and then do v-for loop 3. 5 inside. If the condition appears inside the loop, you can filter out the items that do not need to be displayed by calculating the property computed in advance: {/ / filter out the data that meets the condition and then render items: function () {return this.list.filter (function (item) {return item.isShow})}}. Here, the article "v-if and v-for instance Analysis in Vue" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it. If you want to know more about the articles, you are 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.