vue如何實(shí)現(xiàn)全選和反選功能

這篇文章給大家分享的是有關(guān)vue如何實(shí)現(xiàn)全選和反選功能的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

成都創(chuàng)新互聯(lián)公司業(yè)務(wù)包括：成品網(wǎng)站、企業(yè)產(chǎn)品展示型網(wǎng)站建設(shè)、品牌網(wǎng)站制作、電子商務(wù)型網(wǎng)站建設(shè)、外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè)(多語(yǔ)言)、商城網(wǎng)站開(kāi)發(fā)、定制網(wǎng)站制作、網(wǎng)絡(luò)營(yíng)銷(xiāo)推廣等。效率優(yōu)先，品質(zhì)保證，用心服務(wù)是我們的核心價(jià)值觀，我們將繼續(xù)以良好的信譽(yù)為基礎(chǔ)，秉承穩(wěn)固與發(fā)展、求實(shí)與創(chuàng)新的精神，為客戶提供更全面、更優(yōu)質(zhì)的互聯(lián)網(wǎng)服務(wù)！

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫(kù)，Vue允許可以將一個(gè)網(wǎng)頁(yè)分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript，以用來(lái)渲染網(wǎng)頁(yè)中相應(yīng)的地方，所以越來(lái)越多的前端開(kāi)發(fā)者使用vue。

vue實(shí)現(xiàn)全選反選功能的具體代碼，具體內(nèi)容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<script type="text/javascript" src = "vue.js"></script>
<body>
    <div id = "test">
      <input type='checkbox' v-model="checkBox.checked" class='input-checkbox' @click='checkedAll'>全選
      <div v-for='checkb in checkboxData'>
        <input  type='checkbox' class='input-checkbox' @click="checkItem" v-model='checkBox.items[checkb.id]'>
        {{checkb.value}}
      </div>

    </div>

</body>
<script>
  var vue = new Vue({
    el:"#test",
    data:{
      checkboxData:[
      {
        id:'1',
        value:'蘋(píng)果'
      },{
        id:'2',
        value:'荔枝'
      },{
        id:'3',
        value:'香蕉'
      },{
        id:'4',
        value:'火龍果'
      }
      ],
      checkBox:{
        checked:false,
        items:{}
      }

    },
    methods:{
      checkedAll: function() {
        var _this = this;
        console.log(_this.checkboxData);
        console.log(this.checkBox.items);
        this.checkboxData.forEach(function (item) {
          console.log(item.id);
          _this.checkBox.items[item.id] = _this.checkBox.checked;
          console.log(_this.checkBox.items);
        });
        //實(shí)現(xiàn)反選

      },
      checkItem:function(){
        var unchecked = 0;
        var _this = this;
        this.checkboxData.forEach(
          function(item) {
            unchecked += (! _this.checkBox.items[item.id]) || 0;
          });
        _this.checkBox.checked = unchecked > 0 ? false : true;
      }

    }

  })
</script>

</html>

感謝各位的閱讀！關(guān)于“vue如何實(shí)現(xiàn)全選和反選功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

分享標(biāo)題：vue如何實(shí)現(xiàn)全選和反選功能
本文地址：http://www.muchs.cn/article0/ihpgio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、微信小程序、網(wǎng)站維護(hù)、小程序開(kāi)發(fā)、網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容