ホームページ > 記事 > ウェブフロントエンド > vueで要素を非表示にする命令は何ですか
vueで要素を非表示にする命令は何ですか
- 青灯夜游オリジナル
- 2022-12-15 10:37:063391ブラウズ
vue で要素を非表示にするコマンドは「v-show」です。 v-show 命令は、式の true または false の値に基づいて要素が表示されるか非表示になるかを決定します。構文は「v-show="expression"」です。 v-show 命令は、要素の CSS 表示属性を変更することによって、要素の表示と非表示の状態を制御します。命令に続く式の内容は、最終的にブール値に解析されます。値が true (true) の場合、要素が表示され、値が false (false) の場合は要素が非表示になります。
v-show 命令の概要
v-show 命令の後には、ブール変数またはブール式が続く必要があります。 true 値が false の場合は要素を表示し、値が false の場合は要素を非表示にします。<标签 v-show="true/false"></标签> <!--true:显示 false:隐藏-->例:
<div id="app">
<p v-show="flag == '显示'">Vue 课程</p>
</div><script>
var app = new Vue({
el: '#app',
data: {
flag: '隐藏'
}
});
</script>フラグが「非表示」に設定されている場合、「Vue コース」は表示されません。フラグが「表示」に設定されている場合、「Vue」 「コース」が表示されます。「Vue コース」と表示されます。 実際、フラグを「hidden」に設定すると、p 要素の css 属性表示が none に設定されるため、要素は非表示になります。 レンダリングされたコードは次のとおりです: <p style="display: none;">Vue 课程</p>
v-show code example
以下は html および js コードです。例<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>v-show指令</title>
</head>
<body>
<div id="app">
<input type="button" value="切换显示" @click="changeIsShow" />
<p v-show="isShow">不装了，我摊牌了，没错你要找的就是我</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:false
},
methods:{
changeIsShow(){
this.isShow = !this.isShow
}
}
})
</script>
</body>
</html>レンダリング後のコードは次のとおりです<p style="display: none;">不装了，我摊牌了，没错你要找的就是我</p>コードの実行結果は次のとおりです:
概要
- v-show コマンドの機能は、true または false の値に基づいて要素の表示状態を切り替えることです
- 原則は、要素の CSS プロパティ (表示) を変更して表示するか非表示にするかを決定します。 ##ディレクティブに続くコンテンツは、最終的にブール値に解析されます。値
- #要素が表示される場合、値は true ( true )、値が false (false) の場合、要素は非表示になります
- データが変更されると、対応する要素の表示ステータスも同期的に更新されます
- #[関連する推奨事項: vuejs ビデオ チュートリアル
Web フロント-開発終了]
以上がvueで要素を非表示にする命令は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。