vue怎麼設定隱藏form

前言

在前端開發中，表單是不可缺少的一部分，它幫助我們收集到使用者的信息，達到互動的效果。然而有一些情況例如需要非同步上傳文件，這時候我們需要在不刷新頁面的情況下實現文件上傳，這時候可以把表單隱藏起來，從而實現局部刷新。

那麼在Vue中如何去實作隱藏表單的功能呢？本文將介紹三種方法，分別是v-show、v-if、computed。三者的實現原理略有不同，詳情請看下文。

1. 使用v-show指令

v-show指令在渲染DOM時，只是控制顯示和隱藏，不過顯示元素仍然存在於DOM結構中，只是樣式不同罷了。

範例程式碼：

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

上面程式碼的實作很簡單，透過一個按鈕來控製表單的顯示和隱藏。其中v-show指令直接綁定資料isShowForm，根據其值的真假來決定表單是否顯示。

2. 使用v-if指令

v-if指令還是比較常見的控制元素的顯示和隱藏，不同的是，它是將元素新增/刪除於DOM中。

範例程式碼：

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

與v-show不同，v-if是將DOM元素加入/刪除於DOM生成樹。因此，使用v-if可以在元素不被渲染到頁面時減少資源消耗。

3. 使用computed計算屬性

computed計算屬性雖然與方法的實作方式相似，但是它的快取機制不同於methods。即計算屬性只有在它的依賴發生改變時才會重新求值，並且由於它的緩存，多個元件調用同一個計算屬性時，只有一次求值。因此，使用computed計算屬性可以在Vue.js中實現有效的效能最佳化。

範例程式碼：

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

在上面這個範例中，我們將一個method函數封裝成了一個computed計算屬性。由於運算屬性的快取特性，只有isShowForm值同步改變時才會主動重新計算shouldShowModal值。

總結

這三種方式都可以實現隱藏表單的效果。 v-show透過控制CSS樣式的顯示和隱藏來實現；v-if是將元素添加/刪除到DOM樹中；computed是在計算屬性中對isShowForm值進行了處理。對於不同的場景可以採取不同的方式。

當然，如果我們只需要隱藏某個表單控件，也可以使用v-model和css樣式來實現。因此，對於隱藏表單這類問題，根據實際需求來選擇最簡單和高效的方式是最好的解決方案。

以上是vue怎麼設定隱藏form的詳細內容。更多資訊請關注PHP中文網其他相關文章！