FCAT

Appearance

1. 根据条件渲染class ​

html
<template>
<div v-bind:class="{ active: isActive }"></div>
</template>

<script>
export default {
    data() {
        isActive: true,
    }
}
</script>
<template>
<div v-bind:class="{ active: isActive }"></div>
</template>

<script>
export default {
    data() {
        isActive: true,
    }
}
</script>

结果渲染为：

html
<div class="active"></div>
<div class="active"></div>

2. 可以将class内容定义到data()中 ​

html
<template>
<div :class="classObject"></div>
</template>

<script>
export default {
    data() {
        classObject:{
            active: true,
        }
    }
}
</script>
<template>
<div :class="classObject"></div>
</template>

<script>
export default {
    data() {
        classObject:{
            active: true,
        }
    }
}
</script>

结果渲染为：

html
<div class="active"></div>
<div class="active"></div>

3. 条件渲染class ​

html
<template>
  <div :class="isActive ? 'div_1' : 'div_2'"></div>
</template>

<script>
	export default {
		data() {
			return {
                isActive:true,
            }
        }
    }
</script>

<style>
.div_1 {}

.div_2 {}
</style>
<template>
  <div :class="isActive ? 'div_1' : 'div_2'"></div>
</template>

<script>
	export default {
		data() {
			return {
                isActive:true,
            }
        }
    }
</script>

<style>
.div_1 {}

.div_2 {}
</style>
html
<div :class="[
  class1,
  isActive ? 'class_2' : 'class_3'
  ]">
</div>
<div :class="[
  class1,
  isActive ? 'class_2' : 'class_3'
  ]">
</div>
html
<div :class="[
  class_1,
  { class_2 : isActive }
  ]">
</div>
<div :class="[
  class_1,
  { class_2 : isActive }
  ]">
</div>

4. 条件渲染style ​

  • 对象
html
<div :style="{ 'width': ( isActive ? '' : '100px' ) }"></div>
<div :style="{ 'width': ( isActive ? '' : '100px' ) }"></div>
  • 数组
html
<div :style="[
    { 'height': ( isActive ? '100px' : '' ) },
    { 'width': ( isActive ? '' : '100px' ) } 
]"></div>
<div :style="[
    { 'height': ( isActive ? '100px' : '' ) },
    { 'width': ( isActive ? '' : '100px' ) } 
]"></div>

5. v-for 结合 :style ​

html
<template>
  <div id="app">
      <div  
        v-for="(item,index) in list" :key="index" 
        :style="{
          backgroundImage:'url(' + item.img+ ')',
          backgroundRepeat:'no-repeat',
          backgroundSize: 'cover'
          }" 
        @click="handleCilck(index)">
      </div>
  </div>
</template>
<template>
  <div id="app">
      <div  
        v-for="(item,index) in list" :key="index" 
        :style="{
          backgroundImage:'url(' + item.img+ ')',
          backgroundRepeat:'no-repeat',
          backgroundSize: 'cover'
          }" 
        @click="handleCilck(index)">
      </div>
  </div>
</template>
js
export default {
  name: 'demo',
   data(){
        return {
          list:[
            { img : require('./logo.png') },
            { img : require('./miao.jpg') },
            ]
        }
   },
   methods:{
     handleCilck(index){
        console.log(index)
     }
   }
}
export default {
  name: 'demo',
   data(){
        return {
          list:[
            { img : require('./logo.png') },
            { img : require('./miao.jpg') },
            ]
        }
   },
   methods:{
     handleCilck(index){
        console.log(index)
     }
   }
}