精华内容
下载资源
问答
  • 本篇文章主要介绍了vue 实现全选全不选的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 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 实现全选全不选的示例代码,现在分享给大家,也给大家做个参考。一起过来看看吧全选功能可以说是前端开发中非常常见的一个功能,以前的项目开发用jQuery开发比较多。最近在使用vue前端框架...

    本篇文章主要介绍了vue 实现全选全不选的示例代码,现在分享给大家,也给大家做个参考。一起过来看看吧

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

    例如下面这个简单的demo

    59a635306795da3c85fa633ebc5e8d8e.png

    按照jQuery的思想来做的话,要选中全选checkbox和所有的checkbox项,分别注册选中事件,判断选中状态来给相关的checkbox设置对应的状态,这就涉及到很多的dom操作。

    下面就看一下vue数据驱动dom的思想来实现这一功能。

    vue数据驱动dom实现功能

    全选

    apple

    banana

    orange

    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

    if(!checkObj[i].checked){ // 将未勾选的checkbox选项push到绑定数组中

    this.checkData.push(checkObj[i].value);

    }

    }

    }else { // 如果是去掉全选则清空checkbox选项绑定数组

    this.checkData = [];

    }

    }

    }

    });

    利用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选项,在进行数据绑定。

    全选

    {{item.name}}

    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 = [];

    }

    }

    }

    });

    791832ab480601555a86982b47121028.png

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

    github地址:https://github.com/zhangqian00/

    相关推荐:

    展开全文
  • vue实现全选全不选(基于elementui)

    千次阅读 2018-07-21 17:06:29
    elementui是有checkbox组件,不过问题在于checkbox组件内只能嵌套简单的字符串,如果要嵌入标签怎么办? 首先渲染页面: &...全选&amp;lt;/el-checkbox&amp;gt; &amp;lt;tbody v-for=

    elementui是有checkbox组件,不过问题在于checkbox组件内只能嵌套简单的字符串,如果要嵌入标签怎么办?
    首先渲染页面:

    <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
    <tbody v-for="item in orderData">
      <tr>
        <td class="order-num" colspan="7">
          <el-checkbox v-model="item.checkModel" @change="handleCheckItemChange" style="vertical-align:top;margin-top:20px;"></el-checkbox>
          <div class="num">
            <a href="javascript:;">订单号:{{item.orderNumber}}</a>
            <p>商户单号:{{item.shopNumber}}</p>
          </div>
        </td>
        <td class="order-action" colspan="2">
          <a href="javascript:;">查看详情</a>-<a href="javascript:;">备注</a>-<a href="javascript:;">加星</a>
        </td>
      </tr>
      <tr>
        <td>
          <div class="pic">
            <img :src=item.orderPic alt="">
          </div>
          <div class="info">
            <a href="javascript:;">{{item.name}}</a>
            <p>{{item.size}}</p>
            <p>商品来源:{{item.from}}</p>
          </div>
        </td>
        <td>{{item.number}}</td>
        <td>{{item.price}}</td>
        <td>-</td>
        <td>{{item.company}}</td>
        <td>
          <p>{{item.address}}</p>
          <p>({{item.phone}})</p>
        </td>
        <td>{{item.date}}<br />{{item.time}}</td>
        <td>{{item.state}}</td>
        <td>{{item.pay}}<br /><span v-if="item.postCost">(运费:{{item.postCost}})</span></td>
      </tr>
    </tbody>

    初始化data数据:

    checkAll:false,
    checkedAllShops:[],
    checkItemData:[],
    orderData:[
      {
        checkModel:false,
        orderNumber:'2017081618322542542',
        shopNumber:'2017081618322542542',
        orderPic:'../../../../static/images/realtimeprofile01.png',
        name:'【商城】贴轻松穴位艾灸贴',
        size:'5贴*盒',
        from:'本店商品',
        number:'10',
        price:'200.00',
        company:'蒂花之秀',
        address:'童话镇',
        phone:'12345678910',
        date:'2018-1-12',
        time:'09:30:00',
        state:'订单关闭',
        pay:'400.00',
        postCost:'10'
      },{
        checkModel:false,
        orderNumber:'2017081618322542542',
        shopNumber:'2017081618322542542',
        orderPic:'../../../../static/images/realtimeprofile01.png',
        name:'【商城】贴轻松穴位艾灸贴',
        size:'5贴*盒',
        from:'本店商品',
        number:'10',
        price:'200.00',
        company:'蒂花之秀',
        address:'童话镇',
        phone:'12345678910',
        date:'2018-1-12',
        time:'09:30:00',
        state:'订单关闭',
        pay:'400.00',
        postCost:'10.00'
      }
    ]

    相关方法:

    handleCheckAllChange(val){
      this.orderData.map((item,i)=>{
        item.checkModel = val;
      })
    },
    handleCheckItemChange(val){
      for(let i = 0,l = this.orderData.length;i < l;i ++){
        if(this.orderData[i].checkModel !== val){
          this.checkAll = false;
          return;
        }
      }
      this.checkAll = val;
    }

    css代码就不贴出来了,不好看,哈哈

    展开全文
  • 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
    展开全文
  • <div id="box"> 全选/全不选 <input type="checkbox" v-model="select"> <ul> <li v-for="(item,index) in list" :key="item.id" > <input typ...
  • <template> <div id="app"> <div> <input type="checkbox" @click="checkAll" v-model="checked" /> <span>全选</span> </div> <ul> ...
  • Vue实现全选,反选,全不选 在vue中实现默认选中以及获取单选/复选框的value值都会用到同一个方法,那就是在data中定义一个数组,然后用v-model=“这个数组” data: { whoms:[1,2], } 这样就会默认选中value值是1...
  • checkbox 全选 {{item.country}}
  • 实现思路:1、 v-model 一个收集所有input(除选框外)数组checkModel ,vue会动态将其checked为true的input的value值存入数组checkModel里2 、watch函数来监听checkModel 属性,当其长度==input元素时 全选按钮选中...
  • vue2.0 实现全选和全不选 实现思路: 1、 v-model 一个收集所有input(除选框外)数组checkModel ,vue会动态将其checked为true的input的value值存入数组checkModel里 2 、watch函数来监听checkModel 属性,当其...
  • 最近在学习vue这一块的内容,在项目中用到了全选全不选的功能,开始的时候借鉴了别人写的功能,但感觉写的有一些缺陷,然后就自己写了一套,如有写的不好的地方,请各位大佬指教,本文只贴出核心代码部分,如有不...

空空如也

空空如也

1 2 3 4 5 6
收藏数 101
精华内容 40
关键字:

vue实现全选全不选

vue 订阅