2、vant-ui步进器的使用与绑定：修改购物车数量

<!-- 选择周数 -->
        <div slot="price-top" style="vertical-align: middle;">
            <van-stepper style="display: inline;" v-model="item.num" name='周数' @change="changeNum(item.num,item.id)" disableInput/>
        </div>
步进器绑定了changeNum(item.num,item.id)这个事件，并且传入的两个值。一个是这个商品加入购物车的时候最初的数量，一个是商品在购物车的唯一id。
script：
 
//修改购物车的数量
        changeNum(num,id) {
          console.log(num); //数量
          console.log(id); //id
          //找到数组cartlist里对应id的对象
          var obj=this.cartList.find(function (x) {
              return x.id === id
          });
          // console.log(obj);
          //后端传的是dayofweek，而这个接口需要oneofweek，通过if进行转换
              if(!obj.dayOfWeek1==""){
                this.oneOfWeek=1
              if(!obj.dayOfWeek2==''){
                this.twoOfWeek=1
              if(!obj.dayOfWeek3==''){
                this.threeOfWeek=1
              if(!obj.dayOfWeek4==''){
                this.fourOfWeek=0
              if(!obj.dayOfWeek5==''){
                this.fiveOfWeek=0
              if(!obj.dayOfWeek6==''){
                this.sixOfWeek=0
              if(!obj.dayOfWeek7==''){
                this.sevenOfWeek=0
              this.weekNum=obj.weekNum;
              this.wid=obj.wid;
          this.$axios({
            method: 'PUT',
            url: '/demo/job-car/update',
            headers: {
              'Content-Type': "application/json;charset=UTF-8",
              'Authorization': 'Bearer ' + this.token,
            data:{
              oneOfWeek: this.oneOfWeek,
              twoOfWeek: this.twoOfWeek,
              threeOfWeek: this.threeOfWeek,
              fourOfWeek: this.fourOfWeek,
              fiveOfWeek: this.fiveOfWeek,
              sixOfWeek: this.sixOfWeek,
              sevenOfWeek: this.sevenOfWeek, 
              id:id,
              num:num,
              weekNum:this.weekNum,
              wid:this.wid
          .then(res=>{                    //请求成功后执行函数
            if(res.data.code === 0){
            var res = res.data.data
            this.init
            console.log("更新成功")
          }else{
            console.log("更新失败")
          .catch(err=>{                   //请求错误后执行函
            console.log("请求错误")
3、全选和反选以及批量选择的实现：利用vant-ui
 
html见上面的代码，是利用了vant-ui的/van-checkbox-group组件。这里我主要分析方法。
 
//全选和反选按钮，利用vant-ui简单实现
        checkAll( ) {
          if(this.checkedGoods.length === this.cartList.length){
            this.$refs.checkboxGroup.toggleAll();
          }else{
            this.$refs.checkboxGroup.toggleAll(true);
vant-ui绑定的这个方法真的是非常强大，如果做的是vue移动端的webapp，给大家强烈安利这个ui，连全选按钮的实现都这么简单。
 
到这里我目前在做的这个项目就算是结束了，所以关于这个项目给大家的分享和启示就到此为止了，如果以后emmm出于兴趣我再有新的项目，还会在这里给大家分享滴。然后感谢CSDN，真程序员学习笔记，为我项目的完成提供了巨大的帮助，也因为在这里受到别人的帮助，所以俺也写了这些文章，说不定有用，顺便捞一波访问量，捞一些关注嘿嘿。
 
 
本篇文章如有错的地方，欢迎在评论指正。喜欢在微信看技术文章，可以微信搜索「葫芦金水」，回复【Python】【前端基础】【vue开发】即可获得视频资源，回复【答辩PPT】【演讲PPT】即可获得超级实用PPT模板，还有更多资料，建议后台留言或者直接私信我。
 
 
另，如果觉得这本篇文章写得不错，有点东西的话，各位人才记得来个三连【点赞+关注+分享】。
 
这篇文章主要是跟大家分享了利用Vue.js实现checkbox的全选反选效果，之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项，再点全选结果就是反的了。后来很感谢朋友留言帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧.
html示例代码
<template>
 <input type='checkbox' class='input-checkbox' v-model='checked' v-on:click='checkedAll'>全选
 <template v-for='checkb in checkboxData'>
 <input ty
.van-card__bottom：金额 / 虚拟价格 / 数量，那一块容器。
.van-card__img：图像容器。
.van-card__thumb：左侧容器(图像)
/* 金额/虚拟价格 - 上浮 */
.van-card__bottom{
  padding-bottom: 80rpx!import
  npm  install --save-dev jquery cropper
 为webpack配置添加jquery的映射
修改webpack.base.conf.js配置，添加标红的一行
第二步：新建图片裁剪组件
index.vue内容：
由于用了element-ui,其中布局就引用了element-ui的
 <meta charset=utf-8>
 <meta name=viewport content=initial-scale=1.0, maximum-scale=1.0, user-scalable=no />
 <title></title>
 [removed]
  [removed]=function(){
   var selAll=document.getElementById(selAll);
   var hobbys=
				
在 Vue 框架中使用 el-tree 时，可以在数据源的每个节点对象中添加一个 "checked" 属性，用来控制复选框的选中状态。如果要让 el-tree 在初始渲染时，所有复选框都处于默认全选状态，可以在数据源的所有节点对象中都添加 "checked: true"。
data() {
  return {
    treeData: [
        id: 1,
        label: '一级 1',
        children: [
            id: 4,
            label: '二级 1-1',
            checked: true
            id: 5,
            label: '二级 1-2',
            checked: true
        id: 2,
        label: '一级 2',
        checked: true,
        children: [
            id: 6,
            label: '二级 2-1',
            checked: true
            id: 7,
            label: '二级 2-2',
            checked: true
        id: 3,
        label: '一级 3',
        checked: true
在模板中，可以这样使用 el-tree：
<template>
  <el-tree :data="treeData" show-checkbox></el-tree>
</template>
这样，在 el-tree 初始渲染时，所有的复选框都将被默认选中。
注意：如果数据源中的节点对象没有添加 "checked" 属性，则复选框将处于默认未选中状态。