vueで要素を非表示にする命令は何ですか-フロントエンドQ&A-php.cn

vueで要素を非表示にする命令は何ですか

青灯夜游

リリース： 2022-12-15 10:37:06

オリジナル

3526 人が閲覧しました

vue で要素を非表示にするコマンドは「v-show」です。 v-show 命令は、式の true または false の値に基づいて要素が表示されるか非表示になるかを決定します。構文は「v-show="expression"」です。 v-show 命令は、要素の CSS 表示属性を変更することによって、要素の表示と非表示の状態を制御します。命令に続く式の内容は、最終的にブール値に解析されます。値が true (true) の場合、要素が表示され、値が false (false) の場合は要素が非表示になります。

vueで要素を非表示にする命令は何ですか

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

Vue.js は、次の式の true または false の値に基づいて要素を表示するか非表示にするかを決定する v-show ディレクティブを提供します。

v-show コマンドは、要素の CSS の表示属性を変更することで、要素の表示と非表示の状態を制御します。

v-show 命令の概要

v-show 命令の後には、ブール変数またはブール式が続く必要があります。 true 値が false の場合は要素を表示し、値が false の場合は要素を非表示にします。

<标签 v-show="true/false"></标签>

<!--true:显示   false:隐藏-->

ログイン後にコピー

例:

<div id="app">
    <p v-show="flag == &#39;显示&#39;">Vue 课程</p>
</div>

ログイン後にコピー

<script>
    var app = new Vue({
        el: &#39;#app&#39;,
        data: {
            flag: &#39;隐藏&#39;
        }
    });
</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>

ログイン後にコピー

コードの実行結果は次のとおりです:

vueで要素を非表示にする命令は何ですか

概要

v-show コマンドの機能は、true または false の値に基づいて要素の表示状態を切り替えることです
原則は、要素の CSS プロパティ (表示) を変更して表示するか非表示にするかを決定します。
#[関連する推奨事項:

、

Web フロント-開発終了]

以上がvueで要素を非表示にする命令は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。