vueの補間表現とv-textディレクティブの違いについて
2022-01-13 08:06:53
{{message}}
この構文は、タグのコンテンツ内でのみ使用可能です。
{{}}
この構文は補間式と呼ばれ、補間式には任意の合法的なjs式が書けます
1. プラグイン式の使用
<ブロッククオートプラグイン式を使用すると、コンテンツがちらつく問題があるが、v-textではちらつきの問題はない
<div id="app">
<p>
{{message}}
</p>
<p v-text="message"></p>
</div>
<script src=". /js/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
message:"hello vue"
}
})
</script>
上記のコードでは、正常に出力されれば結果は同じです。
しかし、ネットワークの速度が遅い場合、プラグインの式はページで最初に出力されます。
{{message}}
すると、ページは適切にレンダリングされますが、これはユーザーエクスペリエンスにとって十分なものではありません。
2. プラグイン式でv-cloakを使用し、ちらつき問題を解決する
<style>
[v-cloak]:{
display:none;
}
</style>
<div id="app">
<p v-cloak>
{{message}}
</p>
<p v-text="message"></p>
</div>
<script src=". /js/vue.js"></script>
を使用することができます。
v-cloak
属性を使用すると、実行時に非表示にすることができます。
vue
は自動的に
v-cloak
属性
つまり、この方法を使えば、点滅の問題を解決することができるのです
3. プラグイン表現
プラグイン式は、コンテンツを挿入するだけで、元のコンテンツを上書きすることはありませんが
v-text
は元の内容を上書きして
<div id="app">
<p>
----{{message}}----
</p>
// ----hello vue----
<p v-text="message">1234556</p>
// hello vue
</div>
<script src=". /js/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
message:"hello vue"
}
})
</script>
vueの補間表現とv-text命令の違いについてはこの記事が全てです、もっと関連するvueの補間表現とv-text命令についてはBinaryDevelopの過去記事を検索するか、以下の関連記事を引き続き閲覧してください。
関連
-
JSクロスドメインソリューション リアクト構成 リバースプロキシ
-
vue3レスポンシブ対応のためのsetup+ref+reactive
-
親子コンポーネント通信を解決する3つのVueスロット
-
fetch ネットワークリクエストラッパーの説明例
-
Vueがechartsのtooltipにクリックイベントを追加するケーススタディ
-
vueネットワークリクエストソリューション ネイティブネットワークリクエストとjsネットワークリクエストライブラリ
-
vue3.0プロジェクトのアーキテクチャを構築するための便利なツール
-
vue for 登録ページ効果 vue for sms 認証コードログイン
-
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 実装 サイバーパンク風ボタン