摘要:下面是熱身測試下面是熱身的熱身部
?
?
<template> <div class="hello"> <table> <tr> <th><input type="checkbox" v-model="selectAll">th> <th align="left">Nameth> tr> <tr v-for="user in users"> <td> <input type="checkbox" v-model="selected" :value="user.id" number> td> <td>{{ user.name }}td> tr> table> <hr><br><br> <input type="checkbox" v-model="flag"><br> <input type="checkbox" v-model="arr" value="1"> <input type="checkbox" v-model="arr" value="2"> <input type="checkbox" v-model="arr" value="3"> div> template> <script> export default { name: "HelloWorld", data() { return { users: [ { id: "1", name: "Shad Jast", email: "pfeffer.matt@yahoo.com" }, { id: "2", name: "Duane Metz", email: "mohammad.ferry@yahoo.com" }, { id: "3", name: "Myah Kris", email: "evolkman@hotmail.com" }, { id: "4", name: "Dr. Kamron Wunsch", email: "lenora95@leannon.com" } ],
selected: [],
// ** 下面是熱身的 ** flag: true, arr: ["1"] }; }, methods: {}, computed: { selectAll: { get: function() { return this.users ? this.selected.length == this.users.length : false; }, set: function(value) { var selected = []; if (value) { this.users.forEach(function(user) { selected.push(user.id); }); } this.selected = selected; } } } }; script>
?
熱身部分解釋:
1、v-model為true或者false能控制checkbox勾選與否,
v-model="flag"
2、數(shù)組集合里的元素是否包含當(dāng)前checkbox的value也能控制勾選與否,
v-model="arr" value="3" 意思是如果arr
正文解釋:
return this.users ? this.selected.length == this.users.length : false;
1、users集合是否為空?為空直接不全選
2、已選擇的單選框的元素個數(shù)是否等于Users集合的元素個數(shù)
3、等于的話返回true,意思是已然全選;不等于返回false,不全選
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/2062.html
摘要:當(dāng)勾選全選按鈕旁邊的復(fù)選框時,列表中的選項全部選中,反之取消勾選則列表中的選項全部為未選中狀態(tài)。全選或全不選全選全不選反選設(shè)置全選復(fù)選框獲取選中選項的值選項總個數(shù)全選不全選HTML 我們的頁面上有一個歌曲列表,列出多行歌曲名稱,并匹配復(fù)選框供用戶選擇,并且在列表下方有一排操作按鈕。 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 1.時間都去哪兒了 ...
摘要:最近在看廖雪峰的教程,事件篇的練習(xí)題比較綜合,研究了很久終于研究出來了,現(xiàn)在分享出來,提供給小白學(xué)習(xí)。題目如下首先要獲取到全選和每一項的,然后通過邏輯代碼實現(xiàn)題目要求。 最近在看廖雪峰的Jquery教程,事件篇的練習(xí)題比較綜合,研究了很久終于研究出來了,現(xiàn)在分享出來,提供給小白學(xué)習(xí)。題目如下: showImg(https://segmentfault.com/img/bV7pGr?w=...
摘要:最近在看廖雪峰的教程,事件篇的練習(xí)題比較綜合,研究了很久終于研究出來了,現(xiàn)在分享出來,提供給小白學(xué)習(xí)。題目如下首先要獲取到全選和每一項的,然后通過邏輯代碼實現(xiàn)題目要求。 最近在看廖雪峰的Jquery教程,事件篇的練習(xí)題比較綜合,研究了很久終于研究出來了,現(xiàn)在分享出來,提供給小白學(xué)習(xí)。題目如下: showImg(https://segmentfault.com/img/bV7pGr?w=...
摘要:最近在公司接收到了一個需求,給收藏夾的書籍添加批量全選刪除實現(xiàn)思路點擊全選改變的,改變的,重新便利一下所有的來改變?nèi)x的該組件基本功能已經(jīng)實現(xiàn),用的,苦于官網(wǎng)沒有這樣功能的,我按照上面的思路實現(xiàn),但頭疼的是他只有事件,也就是說在實現(xiàn)全選改 最近在公司接收到了一個需求,給收藏夾的書籍添加批量、全選刪除實現(xiàn)思路:點擊全選改變item的checked,改變item的checked,重新便利一...
摘要:通過查詢用戶所有商品并傳入模板,條件用戶,結(jié)算狀態(tài)。貼出部分代碼用戶加入購物車按鈕鏈接所對應(yīng)路徑的處理,如商品通過獲取商品號并檢測登陸用戶狀態(tài)。通過方法獲取購物車商品模型。附上本電商網(wǎng)站項目的源碼,供各位研究開發(fā)擴(kuò)展歡迎提 1、添加視圖和集合 添加商品鏈接 上節(jié)課程里我們已經(jīng)實現(xiàn)了商品的添加和展示,接下來我們開始進(jìn)行對商品的操作——加入購物車。 首先,商品頁的加入購物車按鈕、購物車查看...
閱讀 2423·2019-08-29 13:53
閱讀 2507·2019-08-29 11:32
閱讀 3047·2019-08-28 17:51
閱讀 3776·2019-08-26 10:45
閱讀 3492·2019-08-23 17:51
閱讀 2983·2019-08-23 16:56
閱讀 3337·2019-08-23 16:25
閱讀 3085·2019-08-23 14:15