Vue implements sample code to select all and none
This article mainly introduces the sample code for implementing vue to select all and none. Now I share it with you and give you a reference.
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 simple demo below
If you do it according to the jQuery idea, you need to select the select all checkbox and All checkbox 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
<p class="checkbox">
<label for="quan">
<!-- 这里的 $event 是将当前对象传入进去，具体详情请参照vue官方文档 -->
<input id="quan" type="checkbox" @click="checkAll($event)"> 全选
</label>
<label>
<!-- v-model 双向数据绑定命令 -->
<input class="checkItem" type="checkbox" value="apple" v-model="checkData"> apple
</label>
<label>
<input class="checkItem" type="checkbox" value="banana" v-model="checkData"> banana
</label>
<label>
<input class="checkItem" type="checkbox" value="orange" v-model="checkData"> orange
</label>
</p>
<script>
new Vue({
el: '#app',
data(){
return {
checkData: [] // 双向绑定checkbox数据数组
}
},
watch: { // 监视双向绑定的数据数组
checkData: {
handler(){ // 数据数组有变化将触发此函数
if(this.checkData.length == 3){
document.querySelector('#quan').checked = true;
}else {
document.querySelector('#quan').checked = false;
}
},
deep: true // 深度监视
}
},
methods: {
checkAll(e){ // 点击全选事件函数
var checkObj = document.querySelectorAll('.checkItem'); // 获取所有checkbox项
if(e.target.checked){ // 判定全选checkbox的勾选状态
for(var i=0;i<checkObj.length;i++){
if(!checkObj[i].checked){ // 将未勾选的checkbox选项push到绑定数组中
this.checkData.push(checkObj[i].value);
}
}
}else { // 如果是去掉全选则清空checkbox选项绑定数组
this.checkData = [];
}
}
}
});
</script>Use vue's two-way data binding v-model command, when When checked, the value of the checkbox will be automatically pushed to the bound array checkData, which 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 wach needs to be changed. Determine the length of the bound array.
Sometimes the checkbox option is dynamically obtained from the background, which makes it more flexible.
For example, the background data is like this:
ajaxData: [{
name: 'a',
value: 'apple'
},{
name: 'b',
value: 'banana'
},{
name: 'c',
value: 'orange'
}]You need to dynamically render the checkbox option first, and then perform data binding .
<p id="app">
<p class="checkbox">
<label for="quan">
<!-- 这里的 $event 是将当前对象传入进去，具体详情请参照vue官方文档 -->
<input id="quan" type="checkbox" @click="checkAll($event)"> 全选
</label>
<label v-for="item in ajaxData">
<!-- v-model 双向数据绑定命令 -->
<input class="checkItem" type="checkbox" :value="item.value" v-model="checkData"> {{item.name}}
</label>
</p>
</p>
<script>
new Vue({
el: '#app',
data(){
return {
ajaxData: [{ // 后台请求过来的数据
name: '选项1',
value: 'apple'
},{
name: '选项2',
value: 'banana'
},{
name: '选项3',
value: 'orange'
}],
checkData: [] // 双向数据绑定的数组
}
},
watch: {
checkData: { // 监视双向绑定的数组变化
handler(){
if(this.checkData.length == this.ajaxData.length){
document.querySelector('#quan').checked = true;
}else {
document.querySelector('#quan').checked = false;
}
},
deep: true
}
},
methods: {
checkAll(e){ // 点击全选事件
if(e.target.checked){
this.ajaxData.forEach((el,i)=>{
// 数组里没有这一个value才push，防止重复push
if(this.checkData.indexOf(el.value) == '-1'){
this.checkData.push(el.value);
}
});
}else { // 全不选选则清空绑定的数组
this.checkData = [];
}
}
}
});
</script>
method is not the optimal way to write, and there are also some disadvantages. Welcome to give me some advice and discuss together.
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
vue uses vue-i18n to achieve internationalization implementation code
Infinite loading vue in Vue -Infinite-loading method
##vue-infinite-loading2.0 Chinese document detailed explanation
The above is the detailed content of Vue implements sample code to select all and none. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to solve win7 driver code 28
Dec 30, 2023 pm 11:55 PM
Some users encountered errors when installing the device, prompting error code 28. In fact, this is mainly due to the driver. We only need to solve the problem of win7 driver code 28. Let’s take a look at what should be done. Do it. What to do with win7 driver code 28: First, we need to click on the start menu in the lower left corner of the screen. Then, find and click the "Control Panel" option in the pop-up menu. This option is usually located at or near the bottom of the menu. After clicking, the system will automatically open the control panel interface. In the control panel, we can perform various system settings and management operations. This is the first step in the nostalgia cleaning level, I hope it helps. Then we need to proceed and enter the system and
What to do if the blue screen code 0x0000001 occurs
Feb 23, 2024 am 08:09 AM
What to do with blue screen code 0x0000001? The blue screen error is a warning mechanism when there is a problem with the computer system or hardware. Code 0x0000001 usually indicates a hardware or driver failure. When users suddenly encounter a blue screen error while using their computer, they may feel panicked and at a loss. Fortunately, most blue screen errors can be troubleshooted and dealt with with a few simple steps. This article will introduce readers to some methods to solve the blue screen error code 0x0000001. First, when encountering a blue screen error, we can try to restart
The computer frequently blue screens and the code is different every time
Jan 06, 2024 pm 10:53 PM
The win10 system is a very excellent high-intelligence system. Its powerful intelligence can bring the best user experience to users. Under normal circumstances, users’ win10 system computers will not have any problems! However, it is inevitable that various faults will occur in excellent computers. Recently, friends have been reporting that their win10 systems have encountered frequent blue screens! Today, the editor will bring you solutions to different codes that cause frequent blue screens in Windows 10 computers. Let’s take a look. Solutions to frequent computer blue screens with different codes each time: causes of various fault codes and solution suggestions 1. Cause of 0×000000116 fault: It should be that the graphics card driver is incompatible. Solution: It is recommended to replace the original manufacturer's driver. 2,
GE universal remote codes program on any device
Mar 02, 2024 pm 01:58 PM
If you need to program any device remotely, this article will help you. We will share the top GE universal remote codes for programming any device. What is a GE remote control? GEUniversalRemote is a remote control that can be used to control multiple devices such as smart TVs, LG, Vizio, Sony, Blu-ray, DVD, DVR, Roku, AppleTV, streaming media players and more. GEUniversal remote controls come in various models with different features and functions. GEUniversalRemote can control up to four devices. Top Universal Remote Codes to Program on Any Device GE remotes come with a set of codes that allow them to work with different devices. you may
Resolve code 0xc000007b error
Feb 18, 2024 pm 07:34 PM
Termination Code 0xc000007b While using your computer, you sometimes encounter various problems and error codes. Among them, the termination code is the most disturbing, especially the termination code 0xc000007b. This code indicates that an application cannot start properly, causing inconvenience to the user. First, let’s understand the meaning of termination code 0xc000007b. This code is a Windows operating system error code that usually occurs when a 32-bit application tries to run on a 64-bit operating system. It means it should
Detailed explanation of the causes and solutions of 0x0000007f blue screen code
Dec 25, 2023 pm 02:19 PM
Blue screen is a problem we often encounter when using the system. Depending on the error code, there will be many different reasons and solutions. For example, when we encounter the problem of stop: 0x0000007f, it may be a hardware or software error. Let’s follow the editor to find out the solution. 0x000000c5 blue screen code reason: Answer: The memory, CPU, and graphics card are suddenly overclocked, or the software is running incorrectly. Solution 1: 1. Keep pressing F8 to enter when booting, select safe mode, and press Enter to enter. 2. After entering safe mode, press win+r to open the run window, enter cmd, and press Enter. 3. In the command prompt window, enter "chkdsk /f /r", press Enter, and then press the y key. 4.
How to use Copilot to generate code
Mar 23, 2024 am 10:41 AM
As a programmer, I get excited about tools that simplify the coding experience. With the help of artificial intelligence tools, we can generate demo code and make necessary modifications as per the requirement. The newly introduced Copilot tool in Visual Studio Code allows us to create AI-generated code with natural language chat interactions. By explaining functionality, we can better understand the meaning of existing code. How to use Copilot to generate code? To get started, we first need to get the latest PowerPlatformTools extension. To achieve this, you need to go to the extension page, search for "PowerPlatformTool" and click the Install button
A quick guide to learning Python drawing: code example for drawing ice cubes
Jan 13, 2024 pm 02:00 PM
Quickly get started with Python drawing: code example for drawing Bingdundun Python is an easy-to-learn and powerful programming language. By using Python's drawing library, we can easily realize various drawing needs. In this article, we will use Python's drawing library matplotlib to draw a simple graph of ice. Bingdundun is a cute panda who is very popular among children. First, we need to install the matplotlib library. You can do this by running in the terminal
