Vue.js を使ってみよう！ 2

・条件分枝とループ

HTMLは、

<div id="app-3">
 <span v-if="seen">Now you see me</span>
</div>

です。そして、scriptは

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

です。v-if = "seen"となっていますね。真偽(true or false)を表現できます。表示は、

Now you see me

と、最初はと表示されていますが、

コンソールで"app3.seen = false"とすれば

と、表示が消えます。

・ユーザー入力の制御

次にv-forを使ってみましょう！これはリスト操作できる命令となります。for in ループですね。配列の中のデータをリストに配置していきます。HTMLは

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

でscriptは配列 todosが定義されています。

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

とすると、

1 Learn JavaScript
2 Learn Vue
3 Build something awesome

と表示されます。

コンソールに

app4.todos.push({text:"new"})

と打ち込むと

4. new

が追加されます。

次はボタンの設置です。"v-on"を使います。HTMLは

<div id="app-5">
 <p>{{ message }}</p>
 <button v-on:click="reverseMessage">Reverse Message</button>
</div>

で、scriptは、

var app5 = new Vue({
 el: '#app-5',
 data: {
   message: 'Hello Vue.js!'
 },
 methods: {
   reverseMessage: function () {
     this.message = this.message.split('').reverse().join('')
   }
 }
})

こんな感じになります。ボタンを押すと文字が反転します。

そして次に"双方向バインディング"です。HTMLは

<div id="app-6">
 <p>{{ message }}</p>
 <input v-model="message">
</div>

で、scriptは

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

ですね。v-model="message"と指定してやると、

と表示されます。これで、<input v-model="message">で表示されている文字が上に表示されます。少し消してみると上の文字も消えていきます。

インタラクティブに文字が表示されます。