ホームページ > 記事 > ウェブフロントエンド > vuejsにdomを追加する方法
vuejs に dom を追加する方法: 1. new first でインスタンスを作成します; 2. 手動で dom ノードにマウントします; 3. "$appendTo/$before/$after" およびその他のメソッドを使用して補間します。
この記事の動作環境: Windows7 システム、Vue2.9.6 バージョン、DELL G3 パソコン
dom の追加方法vuejs?
vue.js を使って dom ノードを挿入する方法
この記事では主に vue.js で dom ノードを挿入する方法を紹介します。以下では多くを語らないので、詳しく紹介しましょう。
html コード:
<div id="app"></div>
js コード:
var MyComponent = Vue.extend({ template: '<p>Hello World</p>' }) var myAppendTo = Vue.extend({ template:'<p>appendTo</p>' }) var myBefore = Vue.extend({ template:'<p>before</p>' }) var myAfter = Vue.extend({ template:'<p>after</p>' }) // 创建并挂载到 #app (会替换 #app) new MyComponent().$mount('#app'); // 手动挂载 new myAppendTo().$mount().$appendTo('#app');//appendTo new myBefore().$mount().$before('#app');//before new myAfter().$mount().$after('#app');//after
説明:
1. jquery の dom ノードの挿入方法を比較すると、vue.js の補間では、まず new でインスタンスを作成し、次に $mount()
を渡す必要があります。
2. 手動で dom ノードにマウントし、$appendTo
/$before
/$after## などのメソッドを使用します。 # 補間。
<ul> <li v-if="ok">显示</li> <li v-else>隐藏</li> </ul>(v-show) を通じて表示と非表示を制御することもできます:
<ul> <li v-show="ok">显示</li> </ul>
次に、v-if と v-show の違い:
v-if が適しています。
最新の 5 つの vue.js ビデオ チュートリアル セレクション 」
以上がvuejsにdomを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。