1. HTML5のテンプレートタグHTML の <!-- 現在のページには、「私はカスタム式 abc です」という内容のみが表示され、「私はテンプレートです」という内容は表示されません。これは、テンプレート タグが本質的に不可視であるためです --> <template><div>私はテンプレートです</div></template> <abc>私はカスタム表現 abc です</abc> 2. テンプレートタグ操作のプロパティとメソッド
<テンプレートid="テンプレート"> <div id="div1">私はテンプレートです</div> <div>私はテンプレートです</div> </テンプレート> <スクリプト> o = document.getElementById("tem"); とします。 console.log(o.content.nodeName);//#ドキュメントフラグメント console.log(o.content.querySelectorAll("div"));//NodeList(2) [div#div1, div].クラス配列を取得します console.log(o.content.getElementById("div1"));//<div id="div1">私はテンプレートです</div> console.log(o.innerHTML);//'<div id="div1">私はテンプレートです</div><div>私はテンプレートです</div>' </スクリプト> 3. Vueのテンプレート1. テンプレートタグはvueインスタンスにバインドされた要素内にあります
<div id="アプリ"> <!--ここではテンプレート タグの内容が表示されており、テンプレート タグは DOM 内に存在しません--> <テンプレート> <div>私はテンプレートです</div> <div>私はテンプレートです</div> </テンプレート> </div> <!--ここでのテンプレート タグの内容はページには表示されませんが、タグとその内部構造は DOM 構造内に存在します--> <テンプレートid="テンプレート"> <div id="div1">私はテンプレートです</div> <div>私はテンプレートです</div> </テンプレート> <script src="node_modules/vue/dist/vue.js"></script> <スクリプト> vm = new Vue({ el: "#app", }); </スクリプト> 注意: vue インスタンスにバインドされた要素内のテンプレート タグは v-show ディレクティブをサポートしていません。つまり、v-show="false" はテンプレート タグでは機能しません。ただし、テンプレート タグは v-if、v-else-if、v-else、v-for 命令をサポートするようになりました。 <div id="アプリ"> <テンプレートv-if="true"> <!--この時点では、テンプレート タグ内のコンテンツがページに表示されますが、DOM 構造にはテンプレート タグがありません--> <div>私はテンプレートです</div> <div>私はテンプレートです</div> </テンプレート> <div v-if="true"> <!--div タグ内のコンテンツがページに表示され、DOM 構造には最も外側の div タグが含まれます--> <div>私はテンプレートです</div> <div>私はテンプレートです</div> </div> <!--6 ここでは「I am template」が出力され、DOM 構造にはテンプレート タグがありません --> <テンプレート v-for="a in 3"> <div>私はテンプレートです</div> <div>私はテンプレートです</div> </テンプレート> </div> <script src="node_modules/vue/dist/vue.js"></script> <スクリプト> vm = new Vue({ el: "#app", }); </スクリプト> 2. Vueインスタンスのテンプレートプロパティ
2) テンプレート属性内の DOM 構造には、ルート要素を 1 つだけ含めることができます。ルート要素が複数ある場合は、v-if、v-else、v-else-if を使用して、ルート要素の 1 つだけを表示するように設定する必要があります。 3) この属性に対応する属性値には、Vue インスタンスデータおよびメソッドで定義されたデータを使用できます。 <!--このページにはhelloが表示されます--> <div id="アプリ"></div> <!--ここでのテンプレート タグは、vue にバインドされた要素の外側で定義する必要があり、次のテンプレート タグの内容はページに表示されません --> <テンプレートid="first"> <div v-if="flag">{{msg} } <div> <div v-else>111<div> </テンプレート> <script src="./node_modules/vue/dist/vue.js"></script> <スクリプト> vm = new Vue({ el:"#アプリ", データ:{ メッセージ:「こんにちは」、 フラグ:true }, template:"#first" //このプロパティを使用すると、カスタム テンプレート プロパティ内のすべてのコンテンツをアプリのコンテンツに置き換えることができます。また、その中の元のコンテンツは上書きされ、DOM 構造を表示するときにテンプレート タグは表示されません}); </スクリプト> 上記の例では、HTML 内のテンプレート タグを次のようにカスタム タグに変更できます。ただし、次の方法では、アプリ要素を <abc id="first"> <div v-if="flag">{{msg} } <div> <div v-else>111<div> </abc> 上記の例は次のようにも書ける。 <!--このページにはhelloが表示されます--> <div id="アプリ"></div> <script src="./node_modules/vue/dist/vue.js"></script> <スクリプト> vm = new Vue({ el:"#アプリ", データ:{ メッセージ:「こんにちは」、 フラグ:true }, template:"<div v-if='flag'>{{msg}}</div><div v-else>123</div>"//テンプレートにはルート要素が 1 つだけ存在できます。複数ある場合は、v-if、v-else、v-else-if を使用して、表示する要素を選択する必要があります}); </スクリプト> テンプレートタグの詳しい使い方(vueでの使い方のまとめも含む)については以上です。テンプレートタグの使い方についてさらに詳しく知りたい方は、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: Vue フィルター、ライフサイクル関数、vue-resource の簡単な紹介
目次プロジェクトディレクトリDockerファイルファイルの展開画像を生成するコンテナを起動するウェブ...
目次序文1. 404 ページ1. 原因2. 解決策2.白い画面を更新する1. 原因2. 解決策3. ...
コマンド: mysqlhotcopyこのコマンドは、ファイルをコピーする前にテーブルをロックし、不完...
目次データベースにインデックスが必要なのはなぜですか?インデックスが B+Tree データ構造を使用...
目次1. エフェクト表示2. 検証コードとメールプッシュ管理の強化(後述のブログを参照) 3. 一般...
目次1. 検索バーの内容をカスタマイズする2. 検索ボタンをカスタマイズする検索バーをカスタマイズし...
この記事では、MySQL 最適化のヒントで重複したエントリを削除する方法を例を使って説明します。ご参...
IE8.0の正式版をインストールしたので、基本的なCSS HACKをいくつかまとめてみました。We...
目次序文 👀リサーチを始めましょう🐱🏍オリジナル🧶 indexOf を使用した元の方法の最適化 ✍...
Git 入門Git は、Linux(R) カーネル開発の管理を支援するために 2005 年に Lin...
time(); 関数関数プロトタイプ: time_t time(time_t *timer)関数の目...
はじめに: Windows 10 を再インストールし、同時にファイルを整理しました。しかし、MySQ...
Docker はプロセスを中核としてシステムリソースを分離する管理ツールです。分離は、オペレーティン...
1. ダウンロードApacheの公式サイトhttp://httpd.apache.org/にアクセス...
この記事では、簡単なドラッグ効果を実現するためのjsの具体的なコードを参考までに共有します。具体的な...