v-show controls hiding and display--case

Introduction to v-show

1. The function of the v-show command is: according to the display state of the switching element
2. The principle is to modify the display of the element to realize display and hiding
3. The content behind the command will eventually be parsed into a Boolean value
4. The value is true element display, value hidden for false elements

In addition to v-if, v-show is also used to determine whether an element is displayed on the page. When it is often necessary to switch between the display and hiding of an element, using v-show will save more performance overhead. When only one display or hiding is required, it is more reasonable to use v-if.

the case 

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

renderings 

Select a rich text document in the text type, and the following figure appears

Select the markdown document in the text type, and the following figure appears 

 

 

 

Guess you like

Origin blog.csdn.net/m0_56471534/article/details/126750650