Vueの一般的な組み込みディレクティブの説明
2022-01-13 14:50:27
<body>
<div id="root">
<h1 v-pre>Learn well</h1>
<h1>{{name}}</h1>
<h1 v-text="name"></h1>
<h2 v-html="str"></h2>
<h2 v-once>The value of n at initialization is:{{n}}</h2>
<h2> The current value is:{{n}}</h2>
<button @click="n++">click me n+1</button>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el: "#root",
data: {
n: 1,
name: "王同学",
str: '<h4>Hello! </h4>'
}
});
</script>
</body>
概要
この記事があなたのお役に立ち、Script Houseの他のコンテンツにもっと注目していただけることを願っています。
関連
-
vue3レスポンシブ対応のためのsetup+ref+reactive
-
Vue Element-uiは、アイコンを追加するためのツリーコントロールノードを詳細に実装しています。
-
要素ツリー制御によるvueTreeテーブル
-
元のイベントが実行されなかった後に要素を追加するためのjQueryソリューション
-
vueのグローバルがscss(mixin)を導入。
-
vue ディレクティブ v-html と v-text
-
vueにおけるv-forループオブジェクトのプロパティ
-
vueにおけるfilterの適用シーンについて解説します。
-
Vueのイベント処理とイベントモディファイアの解説
-
Vueの「データを聴く」原則を解説
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン