vue---减少操作dom，一步步养成好习惯

最近在做人脸识别会议签到的项目，签到过程描述如下：

签到前人脸图像上方增加了一层“遮罩”，为暗色；签到后点亮头像，为外层div添加样式class="signend"即可去掉“遮罩”层。

     <div class="people" id="peopleList" @scroll="scroll" ref="peopleList">
        <div v-for="(item,index) in peopleList" :key="index" :id="item.employee_id" :class="{'nums_10':peopleListLength>48">
          <img :src="'/static/thumbnails/'+item.image_path">
          <p>{{item.name}}</p>
          <div class="cover">
            <i class="iconfont" v-if="item.isAbsent">&#xe670;</i>
          </div>
        </div>
      </div>

在完成上述过程，一开始，总是想着操作dom，如下

 // 改变外层div的class
  if (this.signed > 1) {
      var aDiv = document.getElementById('peopleList').childNodes
      aDiv[this.signed - 1].className = "signend"
  }

后面发现直接加一个标志【item.isAttend = true     // true 已到场 | false 未到场】，根据标志直接在div标签中写入样式 【'signend':item.isAttend】，就不用操作dom了。

  <div class="people" id="peopleList" @scroll="scroll" ref="peopleList">
        <div v-for="(item,index) in peopleList" :key="index" :id="item.employee_id" :class="{'nums_10':peopleListLength>48,'signend':item.isAttend}">
          <img :src="'/static/thumbnails/'+item.image_path">
          <p>{{item.name}}</p>
          <div class="cover">
            <i class="iconfont" v-if="item.isAbsent">&#xe670;</i>
          </div>
        </div>
      </div>