首先在终端中安装jquery
npm i jquery --save
<div class="container mt-3">
<p>
<label><input type="checkbox" @click="ckb" />全选反选</label>
</p>
<div class="row">
<div v-for="(shop,index) in shoplist" style="max-width: 20rem;" v-bind:class="calculate(index)">
<div class="card-header"> {{ index+1 }} <span><input type="checkbox" v-model="checked" /></span></div>
<div class="card-body text-info">
<h4 class="card-title">{{ shop.title }}</h4>
<p class="card-text">¥{{ shop.price }}</p>
</div>
</div>
</div>
</div>
import $ from "jquery";
export default{
data(){
return{
checked:false,
colorList:['primary','danger','secondary','info'],
shoplist:[
{title:'noodles',price:20,id:1},
{title:'rice',price:58,id:2},
{title:'sausage',price:35.5,id:3},
{title:'meat',price:100,id:4}
]
}
},
methods:{
calculate(index){
var nm = this.colorList[Math.floor(Math.random() * this.colorList.length)];
return "card mb-3 col-lg-3 border-"+nm;
},
ckb(event){
//全选反选
this.checked = $(event.target).prop("checked");
}
}
}