精华内容
下载资源
问答
  • vue全选反选获取值

    2021-04-12 09:33:50
    <template> <p>cfvghbjnm</p> </template> <script> export default { data() { return { // 用户当前选择的数据 selectLists: [], ... let index = this.selectL
    <template>
      <p>cfvghbjnm</p>
    </template>
    <script>
    export default {
      data() {
        return {
          // 用户当前选择的数据
          selectLists: [],
        };
      },
      methods: {
        // 获取点击的数据
        clickTable(row) {
          let index = this.selectLists.indexOf(row);
          if (index > -1) {
            this.selectLists.splice(index, 1);
          } else {
            this.selectLists.push(row);
          }
        },
      },
    };
    </script>
    
    
    
    展开全文
  • <!... <... <head>...meta charset="UTF-8">...script src="https://cdn.bootcss.com/vue/2.5.21/vue.js"></script> </head> <body> <div id="app"> <...

     

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script src="https://cdn.bootcss.com/vue/2.5.21/vue.js"></script>
    	</head>
    
    	<body>
    		<div id="app">
    			<div>
    				<input type="checkbox" id="all" v-model="checked" @change="checkAll" />
    				<!-- 全选 -->
    				<label for="all">{{selectAll}}</label>
    			</div>
    			<div v-for="(item,index) in list">
    				<!-- 复选框必须有索引值,否则选中任何一个,其他都会选中,v-model双向绑定 -->
    				<!-- v-model必须绑定创建不同的对象 -->
    				<input type="checkbox" v-model="item.checkModel" :key="item.index" @change="checkBox(item)" />{{item.seller}}
    			</div>
    		</div>
    	</body>
    	<script>
    		var app = new Vue({
    			el: "#app",
    			data: {
    				list: [{
    						seller: "商家1",
    					}, {
    						seller: "商家2",
    					}] //数据
    					,
    				selectAll: '全选',
    				checkModel: [],
    				checked: false, //控制是否全选
    			},
    			methods: {
    				checkAll() {
    					// 触发全选按钮事件
    					// 1.获取下面所有的需要选中的复选框
    					// 2.给每一个复选框设上checked:true的状态
    					// 如果为没有一个选中的复选框
    					if(this.checked) {
    						this.list.forEach((item) => {
    							item.checkModel = true
    						})
    
    					} else {
    						this.list.forEach((item) => {
    							item.checkModel = false
    						})
    					}
    				},
    				checkBox(item) {
    					// 1.获取总复选框数量
    					// 2.循环遍历选中的总数大于等于list
    					if(this.list.every(item => item.checkModel)) {
    						// 3.全选按钮选中
    						this.checked=true
    					} else {
    						// 4.全选按钮不选中
    						this.checked=false
    					}
    				}
    			}
    
    		})
    	</script>
    
    </html>

     

    展开全文
  • vue全选反选demo

    2017-05-09 14:01:00
    <template> <div> <div class="xuanze"> <label>...input type="checkbox" v-model="all" @change="allfn">全选</label> <br><br> ...
    <template>
      <div>
        <div class="xuanze">
          <label><input type="checkbox" v-model="all" @change="allfn">全选</label>
    
          <br><br>
    
          <div class="store" v-for="(store,index1) in stores">
            <label><input type="checkbox" v-model="store.all" @change="storefn(index1)">{{store.name}}</label>
            <ul>
              <li v-for="(item,index2) in store.product"><label><input type="checkbox" v-model="item.xuanze" @change="productfn(index1,index2)">{{item.id}}</label></li>
            </ul>
          </div>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return {
          all: false,
    
          stores: [
            {
              name: '草泥马一号店',
              all: false,
              sellength: 0,
              product:[ 
                {
                  id: 1,
                  xuanze: false,
                },
                {
                  id: 2,
                  xuanze: false,
                },
                {
                  id: 3,
                  xuanze: false,
                },
              ]
            },
            {
              name: '草泥马二号店',
              all: false,
              sellength: 0,
              product:[
                {
                  id: 1,
                  xuanze: false,
                },
                {
                  id: 2,
                  xuanze: false,
                },
                {
                  id: 3,
                  xuanze: false,
                },
              ]
            },
          ]
        }
      },
      methods: {
        allfn: function(){
          for (let i = 0;i < this.stores.length ;i++ )
          {
            let store = this.stores[i];
            store.sellength = this.all ? store.product.length : 0;
            store.all = this.all;
            for (let j = 0;j < store.product.length ;j++ )
            {
              store.product[j].xuanze = this.all;
            }
          }
        },
        storefn: function(index1){
          let store = this.stores[index1];
          let res = store.all;
          store.sellength = res ? store.product.length : 0;
          for (let i = 0;i < store.product.length ;i++ )
          {
            store.product[i].xuanze = res;
          }
          this.all = true;
          for (let j = 0;j < this.stores.length ;j++ )
          {
            if (!this.stores[j].all)
            {
              this.all = false;
              break;
            }
          }
        },
        productfn: function(index1,index2){
          let store = this.stores[index1];
          let product = store.product[index2];
          store.sellength = product.xuanze ? store.sellength+1:store.sellength-1;
          store.all = store.sellength == store.product.length;
          this.all = true;
          for (let j = 0;j < this.stores.length ;j++ )
          {
            if (!this.stores[j].all)
            {
              this.all = false;
              break;
            }
          }
        }
      }
    }
    </script>
    
    <style scoped>
      .xuanze{
        margin: 100px;
      }
      .store{
        border-bottom: 1px solid red;
        margin-bottom: 5px;
      }
      ul{
        margin-left: 20px;
      }
    </style>
    

      

     

    转载于:https://www.cnblogs.com/caonima-666/p/6830326.html

    展开全文
  • vue实现全选反选

    2019-04-30 14:53:38
    vue实现全选反选按钮 <template> <div class="orderinfo"> <div id="example-3"> <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="ja...

     vue实现全选反选按钮

    <template>
      <div class="orderinfo">
        <div id="example-3">
          <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
          <label for="jack">Jack</label>
          <input type="checkbox" id="john" value="John" v-model="checkedNames">
          <label for="john">John</label>
          <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
          <label for="mike">Mike</label>
         
        </div>
    
        <div>
          <input type="checkbox" id="checkbox" v-model="checked" 
             @change="allchooseBtn">
          <label for="checkbox"> 全选</label>
        </div>
    
         <!-- <span>选择的项目: {{ checkedNames }}</span>
    
         <span>全选按钮是否选中{{checkbox}}</span> -->
      </div>
    </template>
    
    
    <script>
    export default {
      name: "Orderinfo",
      data() {
        return {
          checked: false,
          checkedNames: []
        };
      },
    
      mounted() {},
      watch: {
        //监听复选按钮里的值   小于3没有全选   否则是全选   
        checkedNames: function(newQuestion, oldQuestion) {
          console.log(newQuestion);
          if (newQuestion.length < 3) {
            this.checked = false;
          } else {
            this.checked = true;
          }
        },
    //不建议用下面的方法
     //监听单选按钮里的值   如果为true表示选中   复选里的值为全部选中的状态   否则清空   
        //checked: function(newQuestion, oldQuestion) {
         // console.log(newQuestion);
         // if (newQuestion) {
          //  this.checkedNames = ["Jack", "John", "Mike"];
          //} else {
          // this.checkedNames = [];
         // }
        },
      },
    
      methods: {
      allchooseBtn() {
          let that = this;
          if (that.checked) {
            that.checkedNames = ["Jack", "John", "Mike"];
          } else {
            that.checkedNames = [];
          }
        }
      }
    };
    </script>
    
    <style scoped lang="scss">
    </style>
    
    

     

    展开全文
  • vue中,经常会遇到类似于全选与反选的功能,这里列举几个实现全选反选的几种方法
  • vue 实现 全选反选

    2020-07-08 14:34:20
    <body> <div id="app"> <...全选</p> <template v-for="s in isChecks"> <input type="checkbox" name="one" :checked="s.isCheck" @click="checkOne(s.id)
  • Vue checkbox全选反选

    2019-03-22 13:12:01
    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <...vue学习 语法demo1</title> ...
  • Vue实现全选反选功能

    千次阅读 2018-04-28 13:35:34
    2、定义一个空数组B,把请求到的数据赋值给这个数组。...3、判断A和B的长度是否相等来实现全选反选。 下面贴出全部代码 <template> <div> <input type='checkbox' class='input...
  • 最近做的项目用到了全选全不选功能,于是我就自己动手写了一个,基于vue使用监听实现全选反选功能,具体实例代码大家参考下本
  • vue实现全选反选功能

    千次阅读 2018-11-03 14:24:58
    vue脚手架搭建的项目里做的 &lt;template&gt; &lt;div class="user"&gt; &lt;div&gt;&lt;input type="checkbox" v-model="checkAll" @click="...
  • 首先在终端中安装jquery npm i jquery --save &lt;div class="container mt-3"&gt; &lt;p&gt; &lt;label&gt;&lt;input type="...全选反选&lt;/label&gt
  • 最近用vue做了两个项目,都需要实现全选反选的功能,所以想着记录下分享给大家,方便自己或者有需要的朋友们参考讲学习,所以下面这篇文章主要介绍了利用Vue.js实现checkbox的全选反选效果,需要的朋友可以一起来学习...
  • vue入门第4天:vue实现全选反选

    千次阅读 2018-05-28 16:50:36
    参考checkbox单选和全选。知识点:1、子组件给父组件回传id2、子组件监听父组件值的改变3、父组件尽量不要给子组件传递对象和数组代码如下,父组件:app.vue:&lt;template&gt; &lt;div class="...
  • vue复选框 全选 反选 删除功能 组件 代码地址: https://gitee.com/WzQw/codes/otuc4znsgvx01y36arfpj24
  • 下面小编就为大家分享一篇vue 全选反选的实现方法(无Bug 新手看过来),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 父组件的代码如下 ! 子组件的代码块 {{ item.menName }}-level{{ item.menLevel }} 以上是我需要的多级全选反选,结合vue和element-ui实现的,如有问题欢迎大家提意见及解决方案哈!!
  • vue全选反选

    2019-11-18 16:00:17
    注释为反选 <div class="checkbox"> <input type="checkbox" v-model="checkout" @click="handleClick" >全选 <ul> <li v...
  • vue+vuex+vant实现购物车全选反选和计算总价 **main.js中的vuex写法** 全选反选方法定义到mutations里: mutations: { //全选 checkAll(state, allVal) { state.all = allVal; state.carArr.map(val => { ...
  • vue+elementui实现el-select全选 反选

    千次阅读 2020-06-12 14:12:25
    #vue实现el-el-select多选全选 反选 实现的功能: 1、 多选 2、 选择【全选】时多选数据及反选 3、 数据全部勾选时【全选】勾选,全选情况下去除一个选项【全选消失】 <el-select v-model="orgData" size=...
  • vue中使用ref属性进行全选反选功能的实现 vue中给我们提供了一种操作DOM的方属性:ref。绑定在DOM元素上的时候,和id差不多,通过(this.$refs来调用)。 下面就是就是我用vue写的全选(反选)功能的一个小案例: <...
  • vue全选 直接上代码!!!

空空如也

空空如也

1 2 3 4 5 ... 14
收藏数 278
精华内容 111
关键字:

vue全选反选

vue 订阅