vue 循环渲染每条数据显示不同的样式 classs绑定多个样式

一.固定样式<p class="qiu1" @click="hexit(1)" :class="clickType.indexOf(1)>-1?'exitqiu':''" v-if="qiuData.length>0"><img src="

oYuLian

6004人浏览 · 2018-06-21 10:04:35

oYuLian · 2018-06-21 10:04:35 发布

一.固定样式

  <p class="qiu1" @click="hexit(1)" :class="clickType.indexOf(1)>-1?'exitqiu':''" v-if="qiuData.length>0">
 
  <img src="../../assets/img/qiu.png" alt="">
 
  <span>0.01671</span>
 
  </p>
 
  <p class="qiu2" @click="hexit(2)" :class="clickType.indexOf(2)>-1?'exitqiu':''" v-if="qiuData.length>1">
 
  <img src="../../assets/img/qiu.png" alt="">
 
  <span>0.01672</span>
 
  </p>
 
  <p class="qiu3" @click="hexit(3)" :class="clickType.indexOf(3)>-1?'exitqiu':''" v-if="qiuData.length>2">
 
  <img src="../../assets/img/qiu.png" alt="">
 
  <span>0.01673</span>
 
  </p>
 
  <p class="qiu4" @click="hexit(4)" :class="clickType.indexOf(4)>-1?'exitqiu':''" v-if="qiuData.length>3">
 
  <img src="../../assets/img/qiu.png" alt="">
 
  <span>0.01674</span>
 
  </p>
 
  <p class="qiu5" @click="hexit(5)" :class="clickType.indexOf(5)>-1?'exitqiu':''" v-if="qiuData.length>4">
 
  <img src="../../assets/img/qiu.png" alt="">
 
  <span>0.01675</span>
 
  </p>
 
  <p class="qiu6" @click="hexit(6)" :class="clickType.indexOf(6)>-1?'exitqiu':''" v-if="qiuData.length>5">
 
  <img src="../../assets/img/qiu.png" alt="">
 
  <span>0.01676</span>
 
  </p>
 
  <p class="qiu7" @click="hexit(7)" :class="clickType.indexOf(7)>-1?'exitqiu':''" v-if="qiuData.length>6">
 
  <img src="../../assets/img/qiu.png" alt="">
 
  <span>0.01677</span>
 
  </p>
 
  <p class="qiu8" @click="hexit(8)" :class="clickType.indexOf(8)>-1?'exitqiu':''" v-if="qiuData.length>7">
 
  <img src="../../assets/img/qiu.png" alt="">
 
  <span>0.01678</span>
 
  </p>
 
  <p class="qiu9" @click="hexit(9)" :class="clickType.indexOf(9)>-1?'exitqiu':''" v-if="qiuData.length>8">
 
  <img src="../../assets/img/qiu.png" alt="">
 
  <span>0.01679</span>
 
  </p>

   <p class="qiu" v-for="(v,i) in qiuData" :style="{left:position[i].left,top:position[i].top}" @click="hexit(i)" :class="clickType.indexOf(i)>-1?'exitqiu':''">
 
   <img src="../../assets/img/qiu.png" alt="">
 
   <span>0.01679</span>
 
   </p>

  position: [
 
  {
 
  top: "1.33333rem",
 
  left: "5.4rem"
 
  },
 
  {
 
  top: "1.33333rem",
 
  left: "0.133333rem"
 
  },
 
  {
 
  top: "0.66666667rem",
 
  left: "2.4rem"
 
  },
 
  {
 
  top: "3.1rem",
 
  left: "3.1rem"
 
  },
 
  {
 
  top: "4.3rem",
 
  left: "1.3333rem"
 
  },
 
  {
 
  top: "0.266667rem",
 
  left: "5.1rem"
 
  },
 
  {
 
  top: "4.9333rem",
 
  left: "5.1rem"
 
  },
 
  {
 
  top: "4.26667rem",
 
  left: "8.3rem"
 
  },
 
  {
 
  top: "1.3333rem",
 
  left: "8rem"
 
  }
 
  ]

疑问：watch 在如何监听对象和数组

1.监听对象，对象的属性在data里定义过了

  obj:{
 
  a:1
 
  },

  obj: {
 
  handler(newValue, oldValue) {
 
  console.log(newValue);
 
  console.log(oldValue);
 
  // for (let i = 0; i < newValue.length; i++) {
 
  // if (oldValue[i] != newValue[i]) {
 
  // console.log(newValue);
 
  // }
 
  // }
 
  },
 
  deep: true
 
  }

2.监听对象，对象属性没有在data内定义过

要监听的话需要

 self.$set( self.obj,"b", 3);

数组的监听类似对象的监听

  <p v-for="(v,i) in qiuData" @click="hexit(i)" :class="[ 'qiu'+(i+1), { 'exitqiu':clickType.indexOf(i+1)>-1 } ]">
 
  <img src="../../assets/img/qiu.png" alt="">
 
  <span>0.0167{{i++}}</span>
 
  </p>