如有疑問, 微博留言 韓峰26
話不多說, 直接上代碼.
<template> <div> <input type='checkbox' class='input-checkbox' :checked="fruitIds.length === fruits.length" @click='checkedAll()'>全選 <div v-for='(fruit, index) in fruits' :key="index"> <!--判斷fruitIds是否包含當前fruit,fruitIds.indexOf(fruit.fruitId)返回包含fruit的下標, 若不包含則返回-1--> <input type='checkbox' :checked="fruitIds.indexOf(fruit.fruitId)>=0" name='checkboxinput' class='input-checkbox' @click='checkedOne(fruit.id)'> </div> <!--默認刪除按鈕不能點擊, 當選中某一checkbox時可以刪除--> <button :disabled="!fruitIds.length>0" value="Delete" @click="deleteFruits()">Delete</button> </div> </template>
<script> export default { data () { return { fruits:[{ id:'1', value:'蘋果' },{ id:'2', value:'荔枝' },{ id:'3', value:'香蕉' },{ id:'4', value:'火龍果' }], fruitIds:['1','3','4'], // 初始化全選按鈕, 默認不選 isCheckedAll: false } }, methods:{ checkedOne (fruitId) { let idIndex = this.fruitIds.indexOf(fruitId) if (idIndex >= 0) { // 如果已經包含了該id, 則去除(單選按鈕由選中變為非選中狀態) this.fruitIds.splice(idIndex, 1) } else { // 選中該checkbox this.fruitIds.push(fruitId) } }, checkedAll () { this.isCheckedAll = !this.isCheckedAll if (this.isCheckedAll) { // 全選時 this.fruitIds = [] this.fruits.forEach(function (fruit) { this.fruitIds.push(fruit.fruitId) }, this) } else { this.fruitIds = [] } }, deleteFruits () { } } } </script>
本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。