every與some實現全選與提交的基礎判斷

every與some的區別:app

  1.every一假都假this

  2.some一真都假spa

 

實現的具體效果:code

  1.every實現全部複選框都選中全選按鈕選中blog

  2.every實現全部複選框有一個不選中全選按鈕取消選中ip

  3.使用some實現有其中一個選中則能夠提交,不然不能提交input

    <div class="app">
        <div v-for="(item,index) in checks">
            <input type="checkbox" :checked="item.check" v-model="item.check" @change="info">
            {{item.value}}
        </div>
        <input type="checkbox" :checked="checkAll"> 全選 <br>
        <button :disabled="checkDis">肯定</button>
    </div>
    <script>
        new Vue({
            el: '.app',
            data () {
                return {
                    checks:[
                        {
                            check: false,
                            value: '蘋果'
                        },
                        {
                            check: false,
                            value: '草莓'
                        },
                        {
                            check: false,
                            value: '香蕉'
                        }
                    ],
                    checkAll: false,
                    checkDis: false
                }
            },
            mounted () {
                this.info()
            },
            methods: {
                info () {
                    var flg = this.checks.every((item,index) => {
                        return item.check
                    })
                    this.checkAll = flg

                    var btnFlg = this.checks.some((item,index) =>{
                        return item.check
                    })
                    this.checkDis = !btnFlg
                }
            }
        })
    </script>
相關文章
相關標籤/搜索