zoukankan      html  css  js  c++  java
  • vue的全选与反选

    <!DOCTYPE html>
    <html lang="en">
    <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 src="./vue.js"></script>
    </head>
    <style>
    .on{
    100px;
    background: black
    }
     
    </style>
    <body>
    <div id="my">
    <input type="checkbox" v-model="checkAll.check" @change="checkAllChange()">
    <ul style="color: black">
    <li v-for="list in lists">
    <input type="checkbox" v-model="list.check" :class="list.check?'on':''" @change="curChange()">
    </li>
    </ul>
    </div>
    <script type="text/javascript">
    window.onload = function () {
    var app = new Vue({
    el: "#my",
    data: {
    checkAll: { check: false },
    lists: [{ check: true },
    { check: false },
    { check: false },
    { check: false },
    { check: false }]
    },
    //在methods这里面写方法、事件之类的
    methods: {
    checkAllChange: function () {
    var thiss = this
    this.lists.forEach(function(itme) {
    itme.check = thiss.checkAll.check
    });
    },
    curChange:function(){
    var curtrue = this.lists.filter(function(itme){
    return itme.check==true
    })
     
    if(curtrue.length==this.lists.length){
    this.checkAll.check = true
    }else{
    this.checkAll = false
    }
    }
    }
    })
    }
    </script>
    </body>
    </html>

  • 相关阅读:
    ACDream
    HDU
    拼音码和五笔码生成规则
    XML与DataTable相互转换
    如何给gridControl动态的添加合计
    SqlBulkCopy将DataTable中的数据批量插入数据库中
    截取中间字符
    将Excel表格数据转换成Datatable
    DevExpress GridControl 使用方法技巧 总结 收录整理
    C#小技巧
  • 原文地址:https://www.cnblogs.com/webzyf/p/13859186.html
Copyright © 2011-2022 走看看