Tips for handling v-IF and V-for synchronous execution
why?
Hello everyone, I am Daqing Qing, this series is just some of the projects I record in my free time, I use the small techniques that feel good, welcome to put forward better solutions and suggestions
It is not recommended to add v-for and V-if to the same element, because V-for has a higher priority than V-if, so every time V-for is used it will perform V-if, causing unnecessary calculation and affecting performance, especially if it requires a small rendering.
How?
1. This. dataList is an array object dynamically obtained from the back end. Filter out the required display data with the feature of calculating attributes
// Computed attributes: {filterList: function () {return this.datalist. Filter (function (data) {return data.isshow})}Copy the code2. Render the array normally
// template
<ul>
<li v-for="item in filterList" :key="item.id">
{{ item.name }}
</li>
</ul>
Copy the code