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

This article will explain in detail how to achieve the full selection function of vue.js. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

How vue.js implements the full selection function: use normal event listening methods to deal with data status, such as [var list = [{title: 'data one', checked: false,}, {title: 'data two', checked:}, {title...].

The operating environment of this paper: windows10 system, vue.js 2.9, thinkpad T480 computer.

In the actual project, we can use the following two ways to implement the full selection function, as follows:

Method 1: give full play to the characteristics of vuejs, using computed to achieve real-time monitoring of radio buttons.

Select all {{item.title}} var list = [{title: 'data one', checked: false,}, {title: 'data two', checked: true,}, {title: 'data three', checked: true,} {title: 'data four', checked: true,}, {title: 'data five', checked: true,}] Var vm = new Vue ({el:'# app', data: {list}, computed: {status: {get () {return this.list.filter (item = > item.checked). Length = = this.list.length} Set (value) {this.list.map (function (item) {item.checked = value) Return item;});}})

Method 2: use ordinary event monitoring to deal with data state

Select all {{item.title}} var list = [{title: 'data one', checked: false,}, {title: 'data two', checked: true,}, {title: 'data three', checked: true,}, {title: 'data four' Checked: true,}, {title: 'data five', checked: true,}] Var vm = new Vue ({el:'# app', data: {list, status: this.list.filter (item = > item.checked). Length = this.list.length? True: false}, methods: {allCheck () {this.list.map (function (item) {item.checked = this.status; return item;} .bind (this));}, singleCheck () {this.status = this.list.filter (item = > item.checked). Length = = this.list.length? True: false})

It shows that in method 2, the event listening function is used, change or click can also be used. When using click events, there is bug in the lower version of vuejs, bug repair in the higher version, and bug in the two-way binding state. When the two-way binding state changes, the click data state lags behind.

This is the end of the article on "how to achieve the full selection function of vue.js". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.