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

一.固定样式

< 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 >

2.

<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 >