一、:style

1.1、对象形式

<template>
  <div :style="{ height: contentHeight }"></div>
</template>

<script>
  export default {
    data() {
      return {
        contentHeight: '100px'
      }
    }
  }
</script>

当然，我们可以更灵活的使用这个:style，比如设置成number类型，contentHeight的值通过别的逻辑去赋予：

<template>
  <div :style="{ height: `${contentHeight}px` }"></div>
  // 或者可以
  <div :style="{ height: contentHeight + 'px' }"></div>
</template>

<script>
  export default {
    data() {
      return {
        contentHeight: 0,
      }
    },
    watch: {
      /* 这里的getContentHeight可以是你取dom的高度、可以是父组件的props，可以是子组件的emit */
      getContentHeight: {
        immediate: true,
        handler: function(newV, oldV) {
          this.contentHeight = newV;
        }
      }
    }
  }
</script>

1.2、数组形式及三元判断

<template>
  <div
    :style="[ contentHeight === true ? { height: '200px' } : { height: '100px' } ]"
  ></div>
  <button @click="contentHeight = !contentHeight">Click<button>
</template>

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

二、: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>

数组形式下三元判断的补充

判断多个状态，思路就是isActive等于0吗？等于就aaa，不大于就走括号内。
括号内：isActive等于1吗？等于就bbb，不等于就ccc

<div :class="[ isActive == 0 ? 'aaa' : (isActive == 1 ? 'bbb' : 'ccc') ]">
</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去遍历一个DOM的时候，不要在使用v-for的DOM上使用。假如你需要使用v-if，你可以在你的DOM外层套上一层template。如果是v-show的话，template不支持v-show指令，那你就需要自己研究下DOM结构了。

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