国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

checkbox 全選

madthumb / 2829人閱讀

摘要:下面是熱身測試下面是熱身的熱身部

?

?

<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

相關(guān)文章

  • jQuery實現(xiàn)全選、反選和不選功能

    摘要:當(dāng)勾選全選按鈕旁邊的復(fù)選框時,列表中的選項全部選中,反之取消勾選則列表中的選項全部為未選中狀態(tài)。全選或全不選全選全不選反選設(shè)置全選復(fù)選框獲取選中選項的值選項總個數(shù)全選不全選HTML 我們的頁面上有一個歌曲列表,列出多行歌曲名稱,并匹配復(fù)選框供用戶選擇,并且在列表下方有一排操作按鈕。 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 1.時間都去哪兒了 ...

    番茄西紅柿 評論0 收藏0
  • Jquery實現(xiàn)checkbox全選、取消全選和反選

    摘要:最近在看廖雪峰的教程,事件篇的練習(xí)題比較綜合,研究了很久終于研究出來了,現(xiàn)在分享出來,提供給小白學(xué)習(xí)。題目如下首先要獲取到全選和每一項的,然后通過邏輯代碼實現(xiàn)題目要求。 最近在看廖雪峰的Jquery教程,事件篇的練習(xí)題比較綜合,研究了很久終于研究出來了,現(xiàn)在分享出來,提供給小白學(xué)習(xí)。題目如下: showImg(https://segmentfault.com/img/bV7pGr?w=...

    wenzi 評論0 收藏0
  • Jquery實現(xiàn)checkbox全選、取消全選和反選

    摘要:最近在看廖雪峰的教程,事件篇的練習(xí)題比較綜合,研究了很久終于研究出來了,現(xiàn)在分享出來,提供給小白學(xué)習(xí)。題目如下首先要獲取到全選和每一項的,然后通過邏輯代碼實現(xiàn)題目要求。 最近在看廖雪峰的Jquery教程,事件篇的練習(xí)題比較綜合,研究了很久終于研究出來了,現(xiàn)在分享出來,提供給小白學(xué)習(xí)。題目如下: showImg(https://segmentfault.com/img/bV7pGr?w=...

    高璐 評論0 收藏0
  • 使用el-checkbox實現(xiàn)全選,點擊失效沒有反應(yīng)

    摘要:最近在公司接收到了一個需求,給收藏夾的書籍添加批量全選刪除實現(xiàn)思路點擊全選改變的,改變的,重新便利一下所有的來改變?nèi)x的該組件基本功能已經(jīng)實現(xiàn),用的,苦于官網(wǎng)沒有這樣功能的,我按照上面的思路實現(xiàn),但頭疼的是他只有事件,也就是說在實現(xiàn)全選改 最近在公司接收到了一個需求,給收藏夾的書籍添加批量、全選刪除實現(xiàn)思路:點擊全選改變item的checked,改變item的checked,重新便利一...

    Binguner 評論0 收藏0
  • 電商購物網(wǎng)站 - 購物車結(jié)算

    摘要:通過查詢用戶所有商品并傳入模板,條件用戶,結(jié)算狀態(tài)。貼出部分代碼用戶加入購物車按鈕鏈接所對應(yīng)路徑的處理,如商品通過獲取商品號并檢測登陸用戶狀態(tài)。通過方法獲取購物車商品模型。附上本電商網(wǎng)站項目的源碼,供各位研究開發(fā)擴(kuò)展歡迎提 1、添加視圖和集合 添加商品鏈接 上節(jié)課程里我們已經(jīng)實現(xiàn)了商品的添加和展示,接下來我們開始進(jìn)行對商品的操作——加入購物車。 首先,商品頁的加入購物車按鈕、購物車查看...

    PingCAP 評論0 收藏0

發(fā)表評論

0條評論

madthumb

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<