How to set up hidden form in vue

Preface

In front-end development, forms are an indispensable part. It helps us collect user information and achieve interactive effects. However, there are some situations, such as the need to upload files asynchronously. At this time, we need to upload the file without refreshing the page. At this time, the form can be hidden to achieve partial refresh.

So how to implement the function of hiding the form in Vue? This article will introduce three methods, namely v-show, v-if, and computed. The implementation principles of the three are slightly different, please see below for details.

1. Use the v-show command

The v-show command only controls the display and hiding when rendering the DOM, but the display element still exists in the DOM structure, just Just different styles.

Sample code:

<template>
  <div>
    <button @click="isShowForm = !isShowForm">显示/隐藏表单</button>
    <form v-show="isShowForm" @submit.prevent="handleSubmit">
      <input type="text" placeholder="请输入您的姓名" v-model="name" />
      <button type="submit">提交</button>
    </form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShowForm: false,
      name: '',
    };
  },
  methods: {
    handleSubmit() {
      console.log(this.name);
      this.isShowForm = false;
    },
  },
};
</script>

The implementation of the above code is very simple, using a button to control the display and hiding of the form. The v-show instruction directly binds the data isShowForm, and determines whether the form is displayed based on the true or false value of its value.

2. Use the v-if directive

The v-if directive is still relatively common to control the display and hiding of elements. The difference is that it adds/removes elements from in the DOM.

Sample code:

<template>
  <div>
    <button @click="isShowForm = !isShowForm">显示/隐藏表单</button>
    <template v-if="isShowForm">
      <form @submit.prevent="handleSubmit">
        <input type="text" v-model="name" placeholder="请输入您的姓名" />
        <button type="submit">提交</button>
      </form>
    </template>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShowForm: false,
      name: '',
    };
  },
  methods: {
    handleSubmit() {
      console.log(this.name);
      this.isShowForm = false;
    },
  },
};
</script>

Unlike v-show, v-if adds/removes DOM elements to the DOM generation tree. Therefore, using v-if can reduce resource consumption when the element is not rendered to the page.

3. Use computed properties

Although computed properties are implemented similarly to methods, their caching mechanism is different from methods. That is, a computed property will only be re-evaluated when its dependencies change, and due to its cache, when multiple components call the same computed property, it will only be evaluated once. Therefore, using computed properties can achieve effective performance optimization in Vue.js.

Sample code:

<template>
  <div>
    <button @click="toggleForm">显示/隐藏表单</button>
    <form @submit.prevent="handleSubmit" v-if="shouldShowForm">
      <input type="text" v-model="name" placeholder="请输入您的姓名" />
      <button type="submit">提交</button>
    </form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShowForm: false,
      name: '',
    };
  },
  computed: {
    shouldShowForm: function() {
      return this.isShowForm;
    },
  },
  methods: {
    toggleForm() {
      this.isShowForm = !this.isShowForm;
    },
    handleSubmit() {
      console.log(this.name);
      this.isShowForm = false;
    },
  },
};
</script>

In the above example, we encapsulate a method function into a computed property. Due to the caching feature of computed properties, the shouldShowModal value will be actively recalculated only when the isShowForm value changes synchronously.

Summary

These three methods can achieve the effect of hiding the form. v-show is implemented by controlling the display and hiding of CSS styles; v-if adds/removes elements to the DOM tree; computed processes the isShowForm value in the calculated attribute. Different approaches can be taken for different scenarios.

Of course, if we only need to hide a certain form control, we can also use v-model and css styles to achieve this. Therefore, for problems such as hiding forms, choosing the simplest and most efficient method based on actual needs is the best solution.

The above is the detailed content of How to set up hidden form in vue. For more information, please follow other related articles on the PHP Chinese website!