  <template>
      <div class='blockWrap'>
          <div class="block">
              <ul>
                  <li v-for='(item,index) in data1' :key='index' data-dataindex='1' @click='DeleteDOM' v-if='Data1Show'>{{item}}</li>
              </ul>
          </div>
          <div class="block">
              <ul>
                  <li v-for='(item,index) in data2' :key='index' data-dataindex='2' v-if='Data2Show'>{{item}}</li>
              </ul>
          </div>
          <div class="block">
              <ul>
                  <li v-for='(item,index) in data3' :key='index' data-dataindex='3' v-if='Data3Show'>{{item}}</li>
              </ul>
          </div>
          <div class="block">
              <ul>
                  <li v-for='(item,index) in data4' :key='index' data-dataindex='4' v-if='Data4Show'>{{item}}</li>
              </ul>
          </div>
          <button type="button" @click='AddDOM'>添加一块</button>
      </div>
  </template>





  <script>
      export default {
          data() {
              return {
                  data1: ['aa', 'bb', 'cc', 'dd'],
                  data2: ['11', 'bb', 'cc', 'dd'],
                  data3: ['!!', 'bb', 'cc', 'dd'],
                  data4: ['**', 'bb', 'cc', 'dd'],
                  AddBlockData:null,
                  Data1Show:true,
                  Data2Show:true,
                  Data3Show:true,
                  Data4Show:true,
                  CurrentShow:null
              }
          },

          props: [],

          //创建
          created: function () {
              var data1 = ['aa', 'bb', 'cc', 'dd'];
              var data2 = ['11', 'bb', 'cc', 'dd'];
              var data3 = ['!!', 'bb', 'cc', 'dd'];
              var data4 = ['**', 'bb', 'cc', 'dd'];
          },

          mounted: function () {

          },

          methods: {
            DeleteDOM(event){
                var blockIndex = event.target.dataset.dataindex;
                var showName = `Data${blockIndex}Show`;

            },
          }
      }
  </script>

  <style scoped lang='scss'>
      * {
          margin: 0;
          padding: 0;
      }

      .blockWrap {
          font: 14px 'Simsun';

          .block {
              float: left;
              width: 200px;
              height: 200px;
              border: 1px solid #ccc;
              margin: 10px;
          }

          .block:nth-child(1) {
              background-color: red;
              opacity: 0.5;
          }

          .block:nth-child(2) {
              background-color: green;
              opacity: 0.5;
          }

          .block:nth-child(3) {
              background-color: yellow;
              opacity: 0.5;
          }

          .block:nth-child(4) {
              background-color: blue;
              opacity: 0.5;
          }
      }

      .blockWrap::after {
          content: '';
          width: 0;
          height: 0;
          display: block;
          clear: both;
      }
  </style>