Vue.js v-show編
はじめに
Vue .jsを学習し始めたのでアウトプットしていきます
v-show
要素の表示/非表示を切り替える
v-ifとの違い 要素の表示・非表示を切り替えをDOMレベルで削除ではなくCSSのdisplayプロパティをON/OFF
index.html
<div id="app">
<p v-show="thank">
Thankyou
</p>
</div>
app.js
var app = new Vue({
el: '#app',
data: {
tank: true
}
})
上記のようにデータの真偽値をtrueにすれば画面に「Tankyou」が表示されます
app.js
var app = new Vue({
el: '#app',
data: {
tank: false
}
})
上記のようにデータの真偽値をfalseにすれば画面に何も表示されません。
ここで検証ツールを開いてみると
<body>
<div id="app>
<p style="display: none;"> Thankyou </p>
</div>
となっておりp要素がCSSのdisplay: none;により非表示になっています。
学び
要素を頻繁に表示/非表示を繰り返す用途の場合描画コストを抑える事ができて v-if よりも今回の v-show
を使った方が良い
Author And Source
この問題について(Vue.js v-show編), 我々は、より多くの情報をここで見つけました https://qiita.com/shotaro68046088/items/a90b3eeb7c33f31b46af著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .