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 の簡単な紹介
ネットサーフィンをしていると、私の注意を引こうとする美しいグラフィックでいっぱいの Web サイトを...
HTML タグ: 上付き文字HTML では、<sup> タグは上付き文字のテキストを定義...
1. ROW_NUMBER()定義: ROW_NUMBER() 関数は、select によってクエリ...
.imgbox{ 幅: 1200ピクセル; 高さ: 612px; 右マージン: 自動; 左マージン...
今日、会社のプロジェクトでは docker を設定する必要があります。Windows に正常にインス...
目次1. インストール2. プロジェクトにインポートしてマウントする3. 使用Vue2.x はコンポ...
アプリケーションシナリオデータ テーブルでは、アプリケーションは各データがいつ作成されたかを記録する...
(Win7 システム) VMware 仮想マシンのインストール チュートリアルVMware は仮想マ...
テキストシャドウの紹介CSSでは、 text-shadowプロパティを使用してテキストの影を設定しま...
注: 親コンテナーに高さと :data='Array' および overfolw:h...
目次DOMノード要素ノード:テキストノード:プロパティ ノード:要素を取得getElementByI...
1. vue-cli がプロジェクト パッケージを作成した後にページが空白になる問題の解決方法コマン...
MySQL の通常のソート、カスタム ソート、中国語のピンイン文字によるソート。実際の SQL を記...
序文最近、仕事でAES_ENCRYPT()関数を使用してプレーンテキストを暗号化し、MySQL に保...
MySQL ページング分析の原理と効率改善PERCONA PERFORMANCE CONFERENC...