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構造に結合することができ、テキストやDOM属性にデータをバインドすることができないだけであることを示しています。また、Vueのは、また、トランジション効果の強力なシステムを提供しています、あなたは、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: '整个牛项目' } ] } })

1. 学習のJavaScript
2. Vueの学習
3. 全体の牛のプロジェクト

コンソール、入力では  app4.todos.push({ text: '新项目' })、あなたが最後に追加された新しいプロジェクトのリストを見つけるでしょう。