Vueで隠しフォームを設定する方法

はじめに

フロントエンド開発において、フォームはユーザー情報の収集やインタラクティブな効果の実現に欠かせない要素です。ただし、ファイルを非同期でアップロードする必要がある場合など、ページを更新せずにファイルをアップロードする必要がある場合、フォームを非表示にして部分更新を行うことができます。

それでは、Vue でフォームを非表示にする機能を実装するにはどうすればよいでしょうか?この記事では、v-show、v-if、computed の 3 つのメソッドを紹介します。 3 つの実装原則は若干異なります。詳細については、以下を参照してください。

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 を直接バインドし、その値の true または false に基づいてフォームを表示するかどうかを決定します。

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. 計算プロパティを使用する

計算プロパティはメソッドと同様に実装されますが、そのキャッシュ メカニズムはメソッドとは異なります。つまり、計算プロパティは、その依存関係が変更された場合にのみ再評価され、そのキャッシュにより、複数のコンポーネントが同じ計算プロパティを呼び出す場合、そのプロパティは 1 回だけ評価されます。したがって、計算プロパティを使用すると、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>

上記の例では、メソッド関数を計算されたプロパティにカプセル化します。計算されたプロパティのキャッシュ機能により、 shouldShowModal 値は isShowForm 値が同期的に変更された場合にのみアクティブに再計算されます。

概要

これら 3 つの方法により、フォームを非表示にする効果が得られます。 v-show は、CSS スタイルの表示と非表示を制御することによって実装されます。v-if は、DOM ツリーに要素を追加/削除します。computed は、calculated 属性の isShowForm 値を処理します。シナリオごとに異なるアプローチを採用できます。

もちろん、特定のフォーム コントロールのみを非表示にする必要がある場合は、v-model スタイルと CSS スタイルを使用してこれを実現することもできます。したがって、フォームを非表示にするなどの問題については、実際のニーズに基づいて最も簡単で効率的な方法を選択することが最善の解決策となります。

以上がVueで隠しフォームを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。