zoukankan      html  css  js  c++  java
  • vue全选与反选以及通过使用如何filter删除数据

    在vue学习经常遇到的一些基本问题,下面是购物车里面的部分功能,分享给初学者,直接上源码:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>vue使用filter删除数组中每一项</title>
    <style>
    table, td, th{
    border:1px solid #ebebeb;
    border-collapse:collapse;
    text-align: center;
    }
    table {
    500px;
    }
    </style>
    <script src="js/vue.js"></script>
    </head>
    <body>
    <div id="app">
    <table>
    <thead>
    <tr>
    <th>选中个数{{checkedCount}}<input type="checkbox" v-model="allchecked" /></th>
    <th>name</th>
    <th>age</th>
    <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="item in list">
    <td><input type="checkbox" v-model="item.checked" style="zoom:200%" /></td>
    <td>{{item.name}}</td>
    <td>{{item.age}}</td>
    <td><a href="###" @click="Delete(item)">{{item.anniu}}</a></td>
    </tr>
    </tbody>
    </table>
    <input type="button" name="" id="btn" value="提交" @click="btn()" />
    </div>
    <script type="text/javascript">
    var list=[
    {
    name:'小明',
    age:23,
    checked:true,
    anniu:'删除'
    },{
    name:'小刚',
    age:23,
    checked:true,
    anniu:'删除'
    },{
    name:'小王',
    age:25,
    checked:true,
    anniu:'删除'
    },{
    name:'小三',
    age:26,
    checked:false,
    anniu:'删除'
    },

    ]
    new Vue({
    el:'#app',
    data:{
    list
    },
    computed:{
    allchecked:{
    get:function(){

    return this.list.length==this.checkedCount;
    },
    set:function(val){
    //val 就是点击之后,全选按钮的v-model值状态,勾上true。未勾false
    this.list.forEach(item =>{
    item.checked =val;
    })
    }
    },
    checkedCount:{
    get:function(){
    var i=0;
    this.list.forEach(item=>{
    if(item.checked ===true){
    i++;
    }
    })
    return i;
    }
    }
    },methods:{
    btn:function(){
    console.log(JSON.stringify(this.list))
    },Delete:function(p){
    this.list = this.list.filter(item=>item!==p)
    console.log(this.list)
    }
    }
    })
    </script>
    </body>
    </html>

    本人一贯的理念就是大家有更好的可以分享出来,与大家共同学习,共同进步

  • 相关阅读:
    洛谷 P1231 教辅的组成
    BZOJ 2190: [SDOI2008]仪仗队
    Codeforces GYM 100741A . Queries
    COGS 1298. 通讯问题
    洛谷 P2604 [ZJOI2010]网络扩容
    codevs 1227 方格取数 2
    codevs 1004 四子连棋
    洛谷 P2319 [HNOI2006]超级英雄
    洛谷 P2153 [SDOI2009]晨跑
    插入排序
  • 原文地址:https://www.cnblogs.com/h5it/p/9553672.html
Copyright © 2011-2022 走看看