How to use vue to achieve full selection and inverse selection-JS Tutorial-php.cn

This time I will show you how to use vue to achieve all-select and reverse-select, and what are theprecautions for using vue to achieve all-select and reverse-select. The following is a practical case, let's take a look.

The select all function can be said to be a very common function in front-end development. In the past, jQuery was mostly used in project development. Recently I was refactoring my previous project using the vue front-end framework. The transition from jQuery to Vue is mainly a change in thinking. It is to transform the original idea of directly operating DOM into operating data. Using data to drive DOM is also a core idea of the Vue framework. The change of thinking will lead to the realization of functions. Naturally easier to understand.

For example, in the following simple demo

, if you follow the idea of jQuery, you must select the select all checkbox and all checkboxes. Items, register selected events respectively, determine the selected status to set the corresponding status for the relevant checkbox, which involves a lot of

dom operations.

Let’s take a look at the idea of vue data-driven dom to achieve this function.

vue data-driven dom implementation function

全选 apple banana orange

Copy after login

Using vue's two-way data binding v-model command, when checked, the value of the checkbox will be automatically pushed to The bound array checkData saves a lot of operations on the DOM.

If it is a fixed option, this can be achieved, but this method has some disadvantages. Two-way binding of array data is hard-coded and not very flexible. If the checkbox option is added, the binding in wach must be changed. Determine the length of the array.

Sometimes the checkbox option is dynamically obtained from the background, which is more flexible.

For example, the background data is like this:

ajaxData: [{ name: 'a', value: 'apple' },{ name: 'b', value: 'banana' },{ name: 'c', value: 'orange' }]

Copy after login

You need to dynamically render the checkbox option first, and then perform data binding.

 
    全选     {{item.name}}

Copy after login

The method is not the best way to write, and there are also some disadvantages. You are welcome to give us some advice and discuss it together.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!