Vue条件とサイクル

要素を表示するかどうかを切り替えるのも簡単です.

<div id="app-3">
  <p v-if="seen">       p> div>

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

今あなたは私を見ました
コンソールにapp3.seen = falseを入力し続けると、前に表示されたメッセージが消えていることがわかります.
この例では,DOMテキストやattributeにデータをバインドできるだけでなく,DOM構造にもバインドできることを示した.さらに、Vueは、要素の挿入/更新/削除時に遷移効果を自動的に適用できる強力な遷移効果システムも提供します.
他にも多くの命令があり、それぞれに特殊な機能があります.例えば、v-for命令は、配列のデータをバインドしてアイテムリストをレンダリングすることができる.

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

var app4 = new Vue({
  el: '#app-4',
  data: { todos: [ { text: '   JavaScript' }, { text: '   Vue' }, { text: '     ' } ] } })

JavaScript

の学習

学習Vue

牛プロジェクト全体

コンソールにapp4.todos.push({ text: ' ' })と入力すると、リストに最後に新しいアイテムが追加されていることがわかります.