v-if 实现折叠功能-526互联

v-if 用于根据表达式的真假来操作DOM元素，可以切换元素的显示和隐藏；

表达式的值为true时，元素存在于dom树中，表达式为false时，元素从dom树中移除

当数据中pt_show为true时，显示v-if所在的DOM元素, v-else-if所在的DOM元素不会显示

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

<template>
  <el-form ref="form" :model="form" :rules="rules" method="post" label-width="80px">  
    <el-form-item>
        <i v-if="pt_show" class="el-icon-caret-bottom" @click="pt_is_show" style="color:red;font-size:120%"></i>
        <i v-else class="el-icon-caret-right" @click="pt_is_show" style="color:red;font-size:120%"></i>
        <el-button type="text" @click="pt_is_show">Info</el-button>
    </el-form-item>
  </el-form>
</template>


<script>
  export default {
    data() {
      return {
        pt_show: false,
      }
    },
    methods: {
        pt_is_show() {
            this.pt_show = !this.pt_show
            },
  }
</script>

forceupdate destroy v-if if