コンポーネントテンプレートタグのv-if？ <a href="https://vuejs.org/v2/guide/conditional.html#Conditional-Groups-with-v-if-on-lt-template-gt" rel="nofollow noreferrer">docs</a>から

Question

：

V-場合は、ディレクティブですので、それは単一 要素にアタッチする必要があります。しかし、複数の要素を切り替える場合はどうすればよいでしょうか？この の場合、エレメント上にv-ifを使用できます。これは 不可視ラッパーとして機能します。最終レンダリング結果には、 要素は含まれません。

しかし、私のコンポーネントの私のテンプレート上：

<template v-if="false"> 
    <div> 
     .... 
    </div> 
</template> 

しかし、コンポーネントがまだレンダリングします。

コンポーネントにフックが必要なので、v-ifがtrueの場合は、beforeMountedとbeforeDestroyedでコードを入力できます。

Answer 1

は私が

あなたが入れている...あなたは何をしているかundestood場合は、V-かのテンプレートタグINA .vueファイル右int型？ このように

// component.vue 
<template v-if="false"> 
    <div> 
    My Component 
    </div> 
</template> 
<script> 
export default { 
    name: 'my-component' 
}; 
</script> 
<styles> 
</styles> 

右でしょうか？

はいの場合は間違っています。

テンプレートには、Webpack Vue Loaderがコンポーネントテンプレートを読み込むためのタグがあります。

したがってifはテンプレートタグ内に入る必要があります。

// component.vue 
<template> 
    <div v-if="false"> 
    My Component 
    </div> 
</template> 
<script> 
export default { 
    name: 'my-component' 
}; 
</script> 
<styles> 
</styles> 

あなたが別のdivにカプセル化するだけで、複数の要素を「非表示」する必要がある場合。