vue-jquery实现购物车全选和反选

这是一个在vue里使用jquery完成全选和反选的功能

template代码：

           <div class="cart-check-all">

<input type=“checkbox” name=“checkAll” id=“checkAll” v-model=“checkedAll” @click=“checkAll()”/>

				<label class="fontMin">全选</label>
				<div class="skip-cart">
					<router-link to='/ShoppingCart' class="fontMin">查看全部</router-link>
				</div>
			</div>
			<div class="cart-list" v-for="n in 8">
				<div class="single-brand">
					华为荣耀8X
				</div>
				<div class="single-check floatL">

<input type=“checkbox” name="" id="" @click=“singeCheck(n)”/>

				</div>
				<div class="single-img floatL">
					<img src="../../static/img/20181117191032.png"/>
				</div>
				<div class="single-pro floatL">
					<div class="single-pro-color">
						蓝色
					</div>
					<div class="single-pro-combo">
						官方标配
					</div>
					<div class="single-pro-store">
						6+128GB
					</div>
				</div>
				<div class="single-count floatL">
					<button>-</button>
					<span>1</span>
					<button>+</button>
				</div>
				<div class="single-price floatL">
					￥2999.00
				</div>
			</div>

script代码

data (){
			return{
				//购物车的显示
				seen : false,
				checkedAll : false,//选中全部
				isCheck : 0,
			}
		},
		mounted() {
		    
		},
		methods :{
			checkAll(){
				this.checkedAll=!this.checkedAll
				if(this.checkedAll==true){
					for(var i=0;i<$('.single-check input').length;i++){
						$('.single-check input')[i].checked=true
					}
					this.isCheck=$('.single-check input').length
				}else{
					for(var i=0;i<$('.single-check input').length;i++){
						$('.single-check input')[i].checked=false
					}
					this.isCheck=0
				}
			},
			singeCheck(index){
				if($('.single-check input')[index-1].checked){
					this.isCheck++
				}else{
					this.isCheck--
				}
				if($('.single-check input').length===this.isCheck){
					this.checkedAll=true
				}else{
					this.checkedAll=false
				}
			}
		}