v-show控制隐藏与显示--案例

v-show简介

1.v-show指令的作用是：根据切换元素的显示状态
2.原理是修改元素 的display，实现显示隐藏
3.指令后面的内容，最终都会解析为布尔值
4.值为true元素显示，值为false元素隐藏

除了 v-if，v-show也是用来决定某一个元素是否在页面中显示出来。当经常需要切换某个元素的显示与隐藏时，使用v-show会更加节省性能上的开销，当只需要一次显示或隐藏时，使用v-if更合理。

案例 

<template>
        <!-- 文本类型 -->
        <el-form-item label="文本类型" prop="textType">
          <el-radio-group v-model="fileSelect" @change="select">
            <el-radio label="11" border>富文本文档</el-radio>
            <el-radio label="22" border>markdown文档</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="正文" prop="region" v-show="isShow">
          <el-input
            type="textarea"
            :rows="5"
            style="width: 811px"
            placeholder="请输入"
            v-model="textarea2"
          >
          </el-input>
        </el-form-item>
        <!-- markdown文档 -->
        <el-form-item label="正文" prop="region" v-show="!isShow">
          <mavon-editor
            v-model="content"
            ref="md"
            @change="change"
            style="min-height: 550px; width: 811px"
          />
        </el-form-item>
</template>

<script>
export default {
  data() {
    return {
      fileSelect: "11", // 文本类型
      isShow: true,
            }
         },
    methods: {
    // 文本类型
    select() {
      this.isShow = !this.isShow;
      console.log(123);
    }
  },
}
</script>

效果图 

文本类型中选择富文本文档，出现下图

文本类型中选择markdown文档，出现下图