精华内容
下载资源
问答
  • 本篇文章主要介绍了vue 实现全选全不选的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Vue 全选-全不选-反选 demo直接上代码 直接上代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia...

    直接上代码

    <!DOCTYPE html>
    <html lang="zh-cn">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>vue全选反选</title>
            <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        </head>
    
        <style type="text/css">
            #app ul {
                list-style: none;
                padding-left: 0px;
                margin: 5px 0;
            }
    
            #app ul>li {
                padding-bottom: 5px
            }
        </style>
    
        <body>
            <h1>vue全选反选</h1>
            <hr>
            <div id="app">
                <label><input type="checkbox" v-model="isChecked" /> 全选/全不选</label>
                <ul>
                    <li v-for="item in items">
                        <input type="checkbox" :value="item" v-model="checkedItems" />{{item}}
                    </li>
                </ul>
                <input type="button" @click="RevBtn" value="反 选" />
                <input type="button" @click="sendBtn" value="提 交" />
                <p v-show="checkedItems.length !== 0">{{ checkedItems }}</p>
            </div>
            
            <script type="text/javascript">
                
                const ballGames = ['足球', '篮球', '网球', '排球', '羽毛球', '兵乓球']
                // es6语法求两数组补集
                function diffArr(a, b) {
                 return [...a.filter(x => !b.includes(x)), ...b.filter(x => !a.includes(x))]
                }
                
                var app = new Vue({
                    el: '#app',
                    data: {
                        items: ballGames,
                        checkedItems: [],
                    },
                    computed: {
                        isChecked: {
                            //判断每一个选项是否选中,如果全选中则让 全选/全不选 按钮选中
                            get: function() {
                               return this.items.length === this.checkedItems.length
                            },
                            //根据 全选/全不选 按钮的选中状态更改选项,选中则选项全部改为选中状态,不选中则反之
                            set: function(value) {
                                this.checkedItems = value ? ballGames : []
                            }
                        }
                    },
                    methods: {
                        RevBtn() {
                            this.checkedItems = diffArr(ballGames, this.checkedItems)
                        },
                        sendBtn() {
                            alert(this.checkedItems);
                        }
                    }
                })
            </script>
        </body>
    </html>
    
    
    展开全文
  • vue 全选多选全不选

    2021-03-30 12:52:49
  • vue实现全选全不选

    万次阅读 2018-03-27 13:17:21
    全选功能可以说是前端开发中非常常见的一个功能。从jQuery到vue的转变主要是一个思想想的转变,用数据驱动dom,也是vue框架的一个核心思想,思想转变过来,对功能的实现自然容易理解一些。

    全选功能可以说是前端开发中非常常见的一个功能,以前的项目开发用jQuery开发比较多。最近在使用vue前端框架重构之前的项目。从jQuery到vue的转变主要是一个思想想的转变,是将原有的直接操作dom的思想转变到操作数据,用数据驱动dom,也是vue框架的一个核心思想,思想转变过来,对功能的实现自然容易理解一些。

    例如下面这个简单的demo

    按照jQuery的思想来做的话,要选中全选checkbox和所有的checkbox项,分别注册选中事件,判断选中状态来给相关的checkbox设置对应的状态,这就涉及到很多的dom操作。
    下面就看一下vue数据驱动dom的思想来实现这一功能。

    vue数据驱动dom实现功能

    <div 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>
    </div>
    <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>
    

    利用vue的双向数据绑定v-model命令,当勾选时,checkbox的value值会自动push到所绑定的数组checkData中去,省去了不少对dom的操作。

    如果是固定选项这样是可以实现的,但是这种方法有一些弊端,双向绑定数组数据是写死的,不太灵活,如果增加了checkbox选项,要更改wach里绑定数组的长度判断。

    有时候checkbox选项也是后台动态获取过来的,这样也灵活一些

    例如后台数据是这样的:
    	ajaxData: [{
    		name: 'a',
    		value: 'apple'
    	},{
    		name: 'b',
    		value: 'banana'
    	},{
    		name: 'c',
    		value: 'orange'
    	}]
    

    需要先动态渲染checkbox选项,在进行数据绑定

    <div id="app">
    	<div 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>
    	</div>
    </div>
    <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>
    

    方法并不是最优的写法,也存在一些弊端,欢迎各位指点迷津,一起探讨

    https://github.com/zhangqian00/

    这是我的github地址,有一些我自己写的一些关于require、angular、vue等等的小项目,最近在学习Nodejs,非常欢迎大牛们来指点,交流,分享。

    前端很忙
    微信搜索公众号:前端很忙

    获取更多干活分享,欢迎来搞!

    展开全文
  • vue单选 全选 全不选 删除

    千次阅读 2018-08-28 15:02:17
    https://lanhuapp.com/web/#/item/board?pid=615ac805-acc6-4d0a-ac80-2c7692dbb452
    展开全文
  • vue实现全选全不选(基于elementui)

    千次阅读 2018-07-21 17:06:29
    elementui是有checkbox组件,不过问题在于checkbox组件内只能嵌套简单的字符串,如果要嵌入标签怎么办? 首先渲染页面: &...全选&amp;lt;/el-checkbox&amp;gt; &amp;lt;tbody v-for=
  • <template> <div id="app"> <div> <input type="checkbox" @click="checkAll" v-model="checked" /> <span>全选</span> </div> <ul> ...
  • vue复选框全选全不选

    千次阅读 2018-12-14 21:29:54
    全选: ()"> 多个复框: 选择的值为:{{checkedNames}} var app= new Vue({ el: '#app', data: { checked: false, checkedNames: [], checkedArr:["Runoob","Google","Taobao"] }...
  • vue实现单选多选反选全选全不选 单选 当我们用v-for渲染一组数据的时候,我们可以带上index以便区分他们我们这里利用这个index来简单地实现单选 &amp;lt;li v-for="(item,index) in ...
  • 最近在学习vue这一块的内容,在项目中用到了全选全不选的功能,开始的时候借鉴了别人写的功能,但感觉写的有一些缺陷,然后就自己写了一套,如有写的不好的地方,请各位大佬指教,本文只贴出核心代码部分,如有不...
  • <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>...script src="../../vue.js"></script> <style> * {margin: 0;paddin...
  • Vue中的checkbox全选全不选的实现

    千次阅读 2018-10-05 09:12:02
    全选功能可以说是前端开发中非常常见的一个功能,以前的项目开发用jQuery开发比较多。最近在使用vue前端框架重构之前的项目。从jQuery到vue的转变主要是一个思想想的转变,是将原有的直接操作dom的思想转变到操作...
  • vue实现单选多选全选全不选功能

    千次阅读 2019-06-04 16:02:22
    经常遇到一个按钮控制全选/全不选,下面在全选的基础上附上 全选/全不选 代码 全选/取消全选 ()">{{isCheckAll?'清空':'全选'}} methods:{ //全选/取消全选转换 choosecheck(){ if(this.isCheckAll){ this...
  • 在官网上看到vant组件特别好用,就尝试使用checkbox制作单选全选,由于是下午头脑不清楚...全选全不选 1. 引入组件 import Vue from ‘vue’; import { Checkbox, CheckboxGroup } from ‘vant’; Vue.use(Checkb...
  • 实现思路:1、 v-model 一个收集所有input(除选框外)数组checkModel ,vue会动态将其checked为true的input的value值存入数组checkModel里2 、watch函数来监听checkModel 属性,当其长度==input元素时 全选按钮选中...
  • vue实现全选全不选

    2019-03-07 22:25:07
    源码 https://segmentfault.com/q/1010000012675796?_ea=3106401 演示 http://lxchuan12.github.io/html5/vuejs/vue2.0/13、单选全选SF答题.html

空空如也

空空如也

1 2 3 4 5 ... 7
收藏数 125
精华内容 50
关键字:

vue全选全不选

vue 订阅