v-if
公式文書のv-ifの定義を見てみましょう
vショー
公式文書のv-ifの定義を見てみましょう
<div id='app'>
<h1 v-if='false'>{
{
message}}<h1>
<h1 v-show='true'>{
{
message}}</h1>
<div>
<script>
const app = new Vue({
el:"#app",
data:{
message:"我喜欢刘亦菲"
}
})
</script>
ランニングエフェクトを
見ると、v-ifを使用したh1タグがまったく出力さ
れていないことがわかります。ブール値を変更してみましょう。
<div id='app'>
<h1 v-if='true'>{
{
message}}<h1>
<h1 v-show='false'>{
{
message}}</h1>
<div>
v-showで制御されているh6タグは表示されていませんが、domツリーには表示されています。
違い
- v-ifがレンダリングされるとき、domノードは作成されず、この要素はまったく存在しません
- v-showがレンダリングされると、CSS属性の表示を追加することと同じです。domノードがレンダリングされるときに要素に何も表示されません。
- 頻繁に表示と非表示を切り替える必要がある場合：v-show
- スイッチが1つしかない場合：v-if