• vue2.x中使用计算属性巧妙的实现多选框的“全选”


    接下来我会以一个购物车的例子,来演示如果借助计算属性,精巧的实现多选框的全选功能。当然,有全选,自然对应的也还有取消全选。

    以下这张gif图,就是最终的实现效果:

    第一步,针对购物车每一个商品进行设置

    根据上图可以发现,购物车中的每一件商品都有一个选择框,而这个选择框则是需要用一个布尔字段,通过v-model绑定进去,监听该条购物车记录的选中状态。

    首先,沟通后端,为前端预留一个select属性

     该属性默认设置为false,因为购物车在被渲染出来时,默认是应该没有勾选任何一件商品的

    然后,绑定到每一条购物车记录的选择框

     前端接收到后端的json数组后,v-for循环遍历其内的数据。

    第二步,设置全选框

    全选框则是通过v-model绑定一个计算属性

     在这个计算属性中,写进去一个get器和set器

    get器

    get器里面,监听所有购物车记录的选中状态,当购物车所有的记录都被选中的时候,全选按钮自动处于选中状态

    当其中任意一条购物车记录的选中状态被取消后,全选按钮自动取消。

    因为计算属性本身就会去监听data中cartInfo这个数据字段是否出现改变,所以可以利用这个特性,做出上述这种监听效果

    set器

    set器对应的是一个带参的函数,用户对全选按钮的选择动作,可以通过函数中的这个参数传递进来。

    然后就可以通过这个参数实现全选或取消全选

  • 相关阅读:
    细说linux IPC(四):posix 共享内存
    百世经纶一页书
    【机器学习PAI实践二】人口普查统计
    JOptionPane的经常使用4种对话框
    linux pip install gdal apyt-get install libgdal-dev export cplus_path=/usr/include/gdal export c_path=/usr/include/gdal
    linux too many files
    ab 压测
    centos6.6 ftp 配置 修改默认端口等
    openstack instance change storage dir
    事件冒泡(转)
  • 原文地址:https://www.cnblogs.com/shapman/p/12236095.html
Copyright © 2020-2023  润新知