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

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

oYuLian

5911人浏览 · 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 
  > 
 

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^