Vue.jsのレンダリングとループの知識解説

この記事では主にvue.jsの宣言的レンダリングと条件とループの基礎知識を詳しく紹介しますので、興味のある方は参考にしてください

vue.jsの宣言的レンダリングと条件とループの具体的な内容です。すべての人と共有されていますdom要素テキストvalue

htmlコード：

rreee

javascriptコード：

<p id="app">
 {{ message }}
</p>

run結果：hello vue！ app.message のデータを変更すると、レンダリングされた DOM 要素もそれに応じて更新されます。

DOM 要素の属性をバインドする

v-bind ディレクティブを使用して、span 要素の title 属性をバインドします

html コード:

var app = new Vue({
 el: '#app',
 data: {
 message: 'Hello Vue!'
 }
})

JavaScript コード:

<p id="app-2">
 <span v-bind:title="message">
 鼠标悬停此处几秒，
 可以看到此处动态绑定的 title！
 </span>
</p>

実行結果:

概要:

v-bind 属性は命令と呼ばれ、Vue によって提供される特別な属性です。この命令の機能は次のとおりです。「この要素の title 属性を Vue インスタンスの message 属性に関連付けて保持し、更新します。」 。」 app2.message の値を変更すると、title 属性にバインドされている要素が更新されます。

条件

v-if命令を使用して条件を決定します

htmlコード:

var app2 = new Vue({
 el: '#app-2',
 data: {
 message: '页面加载于 ' + new Date()
 }
})

JavaScriptコード:

<p id="app-3">
 <p v-if="seen">现在你可以看到我</p>
</p>

実行結果: 私が見えます

概要:

いつapp3.seen の値を false に変更すると、span が消えることがわかります。これは、データをテキストと属性にバインドできるだけでなく、DOM 構造にもデータをバインドできることを示しています。これにより、データの変更による要素の挿入/更新/削除操作が可能になります。

Loop

v-for 命令は、配列内のデータを使用して項目のリストを表示できます

html コード:

var app3 = new Vue({
 el: '#app-3',
 data: {
 seen: true
 }
})

JavaScript コード:

<p id="app-4">
 <ol>
 <li v-for="todo in todos">
 {{ todo.text }}
 </li>
 </ol>
</p>

実行結果: 1. JavaScript を学ぶ 2 .Vue を学ぶ

3. エキサイティングなコードを作成する

コンソールで「app4.todos.push({ text: 'new item' })」と入力すると、リストに新しい項目が追加されるのが表示されます。

概要:

プロジェクトリストの長さと内容はデータを通じて決定できるため、HTMLコードの量が削減されます

以上がVue.jsのレンダリングとループの知識解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。