一、Class类名

1、对象形式

例子

<div :class="{ 'active': isActive == true }"></div>
<div :class="{ active: isActive == true, disappear: isDisappear }"></div>

实例

<template>
  <div class="home">
    <div
      v-for="(item, index) in example"
      :key="item.id"
      @click="isActive = index"
      :class="{ active: isActive == index }"
    >{{ item.text }}</div>
  </div>
</template>
<script>
export default {
  name: "Home",
  data() {
    return {
      example: [
        { text: "Tab1", id: 1 },
        { text: "Tab2", id: 2 },
        { text: "Tab3", id: 3 },
      ],
      isActive: 0
    };
  },
};
</script>
<style lang="scss" scoped>
.home {
  display: flex;
  align-items: center;
  > div {
    width: 100px;
    color: #333333;
    text-align: center;
    background: #FFFFFF;
    cursor: pointer;
  }
  .active {
    color: #FFFFFF;
    background: rgba($color: #0000FF, $alpha: 0.4);
  }
}
</style>

2、数组形式

<div :class="[ isActive == 0 ? 'active' : '' ]"></div>
<div :class="[ isActive == true ? 'active' : '' ]"></div>
<div :class="[ isActive == index ? 'active' : '' ]"></div>

二、v-if

v-if 和 v-show 写法相同，以下只为展示写法，在真实编写中，v-if尽量不要在经常显隐 的dom中使用，会造成消耗，因为v-if会使dom真正的消失。

<el-button size="mini" @click="disappear = !disappear">显隐按钮</el-button>
<div v-if="disappear && disappear != false">隐藏的内容</div>

<div v-if="showByNumber == 0 ? true : false">三元判断显隐内容</div>

三、v-for

实例

 

<template>
  <div class="home">
    <div class="home-exampleList">
      <div v-for="(item, index) in (viewMore ? exampleList : exampleList.slice(0, 3))" :key="index">
        <span>{{ item.content }}</span>
      </div>
      <span @click="changeListStatus">
        {{ viewMore == true ? '点击收起' : '点击加载更多' }}
        <i :class="[ viewMore ? 'el-icon-arrow-up' : 'el-icon-arrow-down' ]"></i>
      </span>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Home",
    data() {
      return {
        exampleList: [
          { content: 'some words bulabula, 0' },
          { content: 'some words bulabula, 1' },
          { content: 'some words bulabula, 2' },
          { content: 'some words bulabula, 3' },
          { content: 'some words bulabula, 4' },
          { content: 'some words bulabula, 5' },
          { content: 'some words bulabula, 6' },
          { content: 'some words bulabula, 7' },
          { content: 'some words bulabula, 8' },
          { content: 'some words bulabula, 9' },
        ],
        viewMore: false,
      };
    },
    methods: {
      changeListStatus() {
        this.viewMore = !this.viewMore;
      },
    }
  };
</script>

<style lang="scss" scoped>
  .home {
    min-width: 100vw;
    min-height: 100vh;
    &-exampleList {
      display: flex;
      flex-direction: column;
      align-items: center;
      > div {
        transition: all .3s ease-in-out;
      }
      > span {
        padding: 5px 10px;
        border: 1px solid #303030;
        border-radius: 8px;
        cursor: pointer;
        transition: all .3s ease-in-out;
        &:hover {
          color: #FFFFFF;
          background-color: rgba($color: #000000, $alpha: 0.4);
          border-color: rgba($color: #000000, $alpha: 0.4);
        }
      }
    }
  }
</style>