How to use v-show to control the display and hiding of elements in Vue

Vue is a popular JavaScript framework that is widely used to build dynamic, responsive single-page web applications. Among them, the v-show instruction is a commonly used instruction in Vue, which can be used to control the display and hiding of elements. This article will introduce how to use the v-show directive in Vue.

1. Usage of the command
The usage of the v-show command is very simple. Its syntax is as follows:

v-show="expression"

where expression is a JavaScript expression. If the result of the expression is true, the element will be displayed; if the If the expression evaluates to false, the element will be hidden.

2. Example Description
Let’s look at an example below, which has a button and a paragraph. When we click the button, the display state of the paragraph will change:

<template>
  <div>
    <button @click="toggleShow">点击切换</button>
    <p v-show="show">这里是段落文本</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
    };
  },
  methods: {
    toggleShow() {
      this.show = !this.show;
    },
  },
};
</script>

In the above code, we defined the show variable through the data attribute and initialized it to true. In the template, we use the v-show directive to bind the paragraph to the show variable. In the toggleShow method, we toggle the display state of the paragraph by simply inverting the show variable.

As you can see, it is very convenient to use v-show to control the display and hiding of elements. You only need to bind the instruction to a Boolean type variable. Unlike the v-if directive, v-show does not destroy and recreate elements when the element is switched, so it performs better than v-if.

3. Notes on instructions
When using v-show, you need to pay attention to the following issues:

1. v-show can only be bound to elements with the display attribute on, such as div, p, span, etc. If you want to bind the v-show directive to a custom component, make sure the component has the display attribute.
2. If you need to switch between multiple elements, it is recommended to use the v-if directive. Because v-show does not destroy and recreate elements, if you need to frequently switch the display state of elements, it will have a certain impact on performance.
3. If you want to hide the element without occupying the page space where it is located, consider using the v-if directive.

4. Summary
The v-show instruction is a common instruction used in Vue to control the display and hiding of elements. Compared with the v-if instruction, v-show is more suitable for scenarios where the display state of elements needs to be frequently switched. When using v-show, you need to note that the bound element must have the display attribute, and if you need to switch between multiple elements, you should consider using the v-if directive.

The above is the detailed content of How to use v-show to control the display and hiding of elements in Vue. For more information, please follow other related articles on the PHP Chinese website!