vue 关于取值的问题

Question

我根据 coupon.list来循环类名为cash-coupon的div 在每个cash-coupon下面都有一个input复选框 开始都是未选中状态
我需要判断哪些复选框被选中了 然后获取所有被选中复选框的cash-coupon 再通过cash-coupon获取里面类名为lilv的文本值以及属性为data-money和data-deadline的属性值,
还需要获取所有选中复选框的value值
这个我要怎么做呢 如果之前是用jq的话就可以弄 直接获取所有选中复选框再获取父元素cash-coupon,再通过cash-coupon查看类名lilv以及属性名data-money的元素获取相应的值

<div class="cash-coupon v-for='val in coupon.list'>

      <div class="cash-top">
        <div class="checkbox">
          <input type="checkbox" class="regular-checkbox big-checkbox" :value="val.id">
          <label for="" id=""></label>
        </div>
        <div class="left"><span class="lilv">{{val.amount}}</span>%</div>
        <div class="right">
          <p>加息券</p>
          <p 
            v-if="val.minAmountCondition==''">
            最高投资金额
            <i :data-money="val.maxAmountCondition">{{val.maxAmountCondition}}</i>元
          </p>
          <p 
            v-if="val.minAmountCondition!='' && val.maxAmountCondition!=''">
            投资金额
            <i :data-money="val.maxAmountCondition">{{val.minAmountCondition}}-{{val.maxAmountCondition}}
            </i>元
          </p>
          <p 
            v-if="val.periodConditionUnit==0 && val.maxPeriodCondition==''">
            适用于≥
            <i :data-deadline="'+minPeriodCondition + '-' + maxPeriodCondition+ '">
              {{val.minPeriodCondition}}
            </i>天投资期限理财产品
          </p>
          <p 
            v-if="val.periodConditionUnit==0 && val.maxPeriodCondition!='' && val.minPeriodCondition!='' && val.minPeriodCondition!=val.maxPeriodCondition">
            适用于
            <i :data-deadline="'+minPeriodCondition + '-' + maxPeriodCondition+ '">{{val.minPeriodCondition}}-{{val.maxPeriodCondition}}
            </i>天投资期限理财产品
          </p>
          <p 
            v-if="val.periodConditionUnit==0 && val.maxPeriodCondition==val.minPeriodCondition">
            适用于
            <i :data-deadline="'+minPeriodCondition + '-' + maxPeriodCondition+ '">{{val.minPeriodCondition}}</i>
            天投资期限理财产品
          </p>
          
        </div>
      </div>
      <div class="cash-bottom"> 有效期：<i>{{val.createTime | formatTime('YMD')}}</i>至<i>{{val.endTime | formatTime('YMD')}}</i></div>

Answer 1

vue关于复选框的使用
首先data里设置个属性 checkedValues:[]
input里加个v-model="checkedValues":

<input type="checkbox" class="regular-checkbox big-checkbox" :value="val.id">

这样当你勾选这个checkbox，就会把 val.id值 push进checkedValues这个数组
取消勾选则会相应的删去checkedValues里的这个value
再通过计算属性就可以把所有勾选了的 coupon.list 里的元素摘出来：

computed:{
    checkedItemList:function(){
        return this.coupon.list.filter(function(item){
            //循环coupon.list，判断item.id在不在this.checkedValues这个数组里
            return this.checkedValues.indexOf(item.id) !== -1
        })
    }
}

然后你想要的data-money和data-deadline就可以从this.checkedItemList里的每一项找到
话说data-money这种是过去在页面缓存数据的方式
用了mvvm框架就要换个思考和操作方式了~

Answer 2

vue里面有些是双向绑定的，比如说你页面选中了哪个checkbox，和它绑定的值就是为true。而有一些时候只能用选择器，或者ref去获取元素然后进行操作。对了，jq在vue里同样是可以用的啊。