精华内容
下载资源
问答
  • VUE 全选

    2019-10-30 18:44:27
    <div id="vue_det"> 全选:</p> <input type="checkbox" id="checkbox" v-model="checked" @change...
    <div id="vue_det">
    <p>全选:</p>
    <input type="checkbox" id="checkbox" v-model="checked" @change="changAllChecked"/>
    <label for="checkbox">
    {{checked}}
    </label>

    <p>多个复选框</p>
    <input type="checkbox" id="r1" value="r1" v-model="checkedNames"/>
    <label for="r1">r1</label>
    <input type="checkbox" id="r2" value="r2" v-model="checkedNames"/>
    <label for="r2">r2</label>
    <input type="checkbox" id="r3" value="r3" v-model="checkedNames"/>
    <label for="r3">r3</label>
    <input type="checkbox" id="r4" value="r4" v-model="checkedNames"/>
    <label for="r4">r4</label>
    <input type="checkbox" id="r5" value="r5" v-model="checkedNames"/>
    <label for="r5">r5</label>

    <span>选择的值为:{{checkedNames}}</span>
    </div>
    <script type="text/javascript">
    var vm = new Vue({
    el:'#vue_det',
    data:{
    checked:false,
    checkedNames:[],
    checkedArr:['r1','r2','r3','r4','r5']
    },
    methods:{
    changAllChecked:function(){
    if(this.checked){
    this.checkedNames = this.checkedArr
    }else{
    this.checkedNames=[]
    }
    }
    }
    });
    </script>

    更多专业前端知识,请上【猿2048】www.mk2048.com
    展开全文
  • vue 全选与取消全选

    2019-05-05 15:12:16
    vue 全选与取消全选 所用知识点 1 v-model:监听input内容 2 watch:监听属性方法 参考https://cn.vuejs.org/v2/api/#watch 3 页面初始化调用函数 mounted 一:html元素 实现思路 1 v-model 一个收集所有input(除...

    vue 全选与取消全选

    所用知识点

    1 v-model:监听input内容

    2 watch:监听属性方法

    在这里插入图片描述

    参考https://cn.vuejs.org/v2/api/#watch

    3 页面初始化调用函数 mounted

    一:html元素

    在这里插入图片描述
    在这里插入图片描述

    实现思路

    1 v-model 一个收集所有input(除全选框外)数组checkModel ,vue会动态将其checked为true的input的value值存入数组checkModel里

    2 watch函数来监听checkModel 属性,当其长度==input元素时 全选按钮选中 否则取消

    3 全选按钮v-model checkAll 属性来显示当前选中状态 click事件里 当checkAll为true时 全选 所有input按钮被选中也就是checkModel的遍历存入其value值

    完整代码:在这里插入图片描述

    在这里插入图片描述

    备注:这里getUserData()函数并没有使用到只是为有序ajax请求渲染页面做铺垫

    展开全文
  • 下面小编就为大家分享一篇vue 全选与反选的实现方法(无Bug 新手看过来),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue全选 直接上代码!!!

    直接上代码!!!生气

    <!DOCTYPE html>
    <html lang="en">  
        <head>  
            <meta charset="UTF-8">  
            <title>Document</title>  
        </head>  
        <body>  
            <div id="app">
                <div style="padding-left: 20px">  
                    <ul style="margin-bottom: 20px">   
                        <li v-for="(item, index) in proData">  
                            <input type="checkbox" :value="index" v-model="selectArr">{{item.name}}  
                        </li>  
                    </ul>  
                    <label>   
                        <input type="checkbox" @click="selectAll" :checked="checked"/>全选   
                    </label>   
                </div>   
            </div>  
        </body>  
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>  
        <script type="text/javascript">  
            var vm = new Vue({  
                el : "#app",  
                data : {
                    proData: [  
                        {  
                            "name": "张三"  
                        }, {  
                            "name": "李四"  
                        }, {  
                            "name": "王五"  
                        }, {  
                            "name": "赵六"  
                        }  
                    ],
                    selectArr: [],  
                    checked : false  
                },  
                watch : {  
                    selectArr(curVal){  
                        if(curVal.length == this.proData.length){  
                            this.checked = true  
                        }else{  
                            this.checked = false  
                        }  
                    }  
                },  
                methods: {
                    selectAll(event){  
                        if (!event.currentTarget.checked) {  
                            this.selectArr = [];  
                        } else { //实现全选  
                            this.selectArr = [];  
                            this.proData.forEach((item, i) =>{  
                                this.selectArr.push(i);  
                            });  
                        }  
                    }  
                }  
            })  
        </script>  
    </html>  

    如果有bug,请告知

    展开全文
  • vuevue 全选与取消全选

    千次阅读 2018-12-26 14:53:50
    1 v-model 一个收集所有input(除全选框外)数组checkModel ,vue会动态将其checked为true的input的value值存入数组checkModel里 2 watch函数来监听checkModel 属性,当其长度==input元素时 全选按钮选中 否则取消...

    知识点:

    1 v-model:监听input内容

    2 watch:监听属性方法
    在这里插入图片描述

    3 页面初始化调用函数 mounted

    一:html元素

    <table id="userTable" class="table table-bordered table-hover">
      <thead>
         <tr>
             <th><input type="checkbox" name='check' v-model="checkedAll" @change="changeState"></th>
             <th>编号</th>
             <th>反馈用户</th>
             <th>手机号</th>
             <th>反馈时间</th>
             <th>操作</th>
         </tr>
         </thead>
         <tbody>
    	     <template v-for="item in tableList">
    	         <tr>
    	             <td><input type="checkbox" name='check' v-model="checkModel" :value="item.id"></td>
    	             <td>{{ item.nu }}</td>
    	             <td>{{ item.user.nickname }}</td>
    	             <td>{{ item.user.phone}}</td>
    	             <td>{{ item.times}}</td>
    	             <td>
    	                 <button class="btn btn-default btn-xs" v-link="{ name: 'FeedbackDetail', query: { id: item.id} }"> 查看</button>
    	                 <button class="btn btn-danger btn-xs" @click="deleteQuestion(item.id)">删除</button>
    	             </td>
    	         </tr>
    	     </template>
         </tbody>
         <tfoot>
    	     <tr>
    	         <td colspan="12">
    	             <button class="btn btn-danger btn-xs" @click="batchRemoval()">批量移除</button>
    	         </td>
    	     </tr>
         </tfoot>
     </table>
    

    如图:
    在这里插入图片描述

    实现思路

    1 v-model 一个收集所有input(除全选框外)数组checkModel ,vue会动态将其checked为true的input的value值存入数组checkModel里

    2 watch函数来监听checkModel 属性,当其长度==input元素时 全选按钮选中 否则取消

    3 全选按钮v-model checkAll 属性来显示当前选中状态 click事件里 当checkAll为true时 全选 所有input按钮被选中也就是checkModel的遍历存入其value值

    完整代码:

    export default {
            name: "Feedback",
            data(){
                return {
                    tableList: [], //所有数据
                    checkModel: [], //批量选择id
                    checkedAll: false, //是否是全选
                }
            },
            methods: {
                //全选
                changeState(){
                    this.checkModel = [];
                    if(this.checkedAll){
                        for(var i in this.tableList){
                            this.checkModel.push(this.tableList[i].id)
                        }
                    }
                    console.log(this.checkModel)
                }
            },
            watch:{
                checkModel :{
                    handler (){
                        if(this.checkModel.length == this.tableList.length){
                            this.checkedAll = true
                        }else{
                            this.checkedAll = false
                        }
                    },
                    deep: true
                }
            }
        }
    
    展开全文
  • Vue 全选-全不选-反选 demo直接上代码 直接上代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia...
  • vue 全选功能

    2021-03-24 18:31:40
    通过计算属性实现 <template> <div> <div>...input type="checkbox" v-...全选</div> <div> <template v-for="(item,index) in mySelect"> <input type="checkbox" :k..
  • vue全选与取消全选

    2019-09-26 14:57:53
    ()"/> 全选 (v,i) in items"> (i)"/> {{v.name}} let vm = new Vue({ el:"#my", data:{ all:true, items:[ {name:'手机',status:false}, {name:'电脑',status:false}, {name:'...
  • Vue全选示例

    2020-07-06 17:10:09
    <div> <div> <...全选</span> </div> <ul> <li v-for="(item,index) in list" :key="index" style="margin-top:20px;"> <input type="checkbo.
  • vue全选和取消全选

    2019-04-02 11:56:00
    作为全选 取消全选的显示文字 }, methods: { selectAll: function ( event ) { var _this = this ; if (! event .currentTarget. checked ) { this .checkboxArr = []; // 取消全选 this ....
  • vue全选删除

    2019-11-04 09:22:33
    2.vue delete2 : function ( ) { //全选删除 var nids = vm . nids . join ( "," ) ; alert ( nids ) ; $ . post ( "/news/delete2" , { nids : nids } , function ( ) { alert ( "删除成功" ) ;...
  • vue 全选多选

    2018-06-29 09:28:00
    //全选按钮 <li class="choice_fme">  <div @click="checkAll" v-bind:class='[!isCheckAll ? "not_pitch_on" : "pitch_on"]'></div> </li> //列表 <ul class="msge_list cle....
  • 很简单的使用vue实现全选和取消全选 直接上代码,简单易懂不懂得可以留言。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>...
  • vue全选和反选

    2019-11-18 16:00:17
    注释为反选 <div class="checkbox"> <input type="checkbox" v-model="checkout" @click="handleClick" >全选 <ul> <li v...
  • vue全选反选获取值

    2021-04-12 09:33:50
    <template> <p>cfvghbjnm</p> </template> <script> export default { data() { return { // 用户当前选择的数据 selectLists: [], ... let index = this.selectL
  • vue全选功能的实现

    2019-11-06 18:26:23
    <template> <div> <div> <input type="checkbox" class="check_box tui-checkbox" @click="checkAll" v-model="checked"> <span>全选</span&g...
  • 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> <input type="checkbox" v-model="isCheckAll" @change="checkedAll"> 全选/取消全选 <input type="checkbox" v-...
  • <p> <input type="checkbox" @click="change" :checked="isSelectAll" />...利用vue computed计算属性,计算选中状态 computed: { // 全选状态 isSelectAll() { if (this.addlist.length =.
  • vue 全选多选全不选

    2021-03-30 12:52:49

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,227
精华内容 490
关键字:

vue全选

vue 订阅