Vueでv-ifを使う方法-Vue.js-php.cn

Vueでv-ifを使う方法

WBOY

リリース： 2022-03-17 11:08:36

オリジナル

52366 人が閲覧しました

vue では、「v-if」を使って true または false の式に従って DOM 要素を操作し、要素の表示と非表示を切り替えることができます。式の値が true の場合、要素は存在します。 dom ツリーでは、式が false の場合、要素は DOM ツリーから削除され、構文は「v-if="expression"」になります。

Vueでv-ifを使う方法

この記事の動作環境: Windows 10 システム、Vue バージョン 2.9.6、DELL G3 コンピューター。

vue での v-if の使用法

v-if: 式の true または false に基づいて要素 (操作 DOM 要素) の表示と非表示を切り替えます

Vueでv-ifを使う方法

(1) v-if application

<div id="app">
 <h2 v-if="true">{{message}}</h2>
</div>

ログイン後にコピー

データは true の場合にのみ表示されます

( 2) v-if と v-else

<div id="app">
 <h2 v-if="false">{{message}}</h2>
  <h1 v-else>hello</h1>
</div>

ログイン後にコピー

v-if が true の場合は if を実行、そうでない場合は else を実行

(3) ケース: v-if とv-else Application

<body>
<div id="app">
    <span v-if="isUser">
      <label for="username">用户账号</label>
      <input type="text" id="username" placeholder="用户账号">
    </span>
    <span v-else>
        <label for="email">用户邮箱</label>
        <input type="text" id="email" placeholder="用户邮箱">
    </span>
   <button @click="isUser=!isUser">切换类型</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: &#39;#app&#39;,
        data: {
            isUser: true
        }
    })
</script>
</body>

ログイン後にコピー

スイッチタイプをクリック後、表示内容を切り替えることができますが、この際、入力タグの再利用の問題が発生します（入力ボックスの内容は変わりません）切り替え後。これは仮想 DOM です。可能な限り、新しい要素を作成する代わりに既存の要素を再利用することでパフォーマンスが向上します。キー属性を追加できます。キーが同じ場合は内容が保持されます。キーが異なる場合は、コンテンツは保持されません。

[関連する推奨事項: "vue.js チュートリアル"]

以上がVueでv-ifを使う方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。