Vue JSをまなぶ

v-forディレクティブ

ポイント：
●v-for=”todo in todos”のような形式で記述する
●v-forはLIなどの繰り返す子要素に書く

ポイント：
checkboxのON/OFFはv-on:change=”toggle(todo)”　などと記述する
v-on:change は　JSでいうところの onChange=”toggle(todo)”などとお味意味

また、v-bind:checked=”todo.done”などとすることで input checked=”{{todo.done}}” と同じ意味になる

v-bind:href=”url”
:href=”url”

v-bind:class=”{color:#f33}”

v-if=”hoge” ならば hogeがデータ上Trueならば表示される
v-else HogeがFalseならば表示される

v-if=”type==’A'”
v-else-if=”type==’B'”
v-else
という組合わせも可能

v-modelは双方向バインディング
データが変わってもHTML要素が変わっても反映される

<input type="text" v-model="message">
{{message}}

<script>
new Vue=({
  el:"#app",
  data:{
    message:"hoge"
  }
})
</script>

new Vue=({

el:"#app",

data:{

message:"hoge"

}

})

</script>

チェックボックス

<input type="checkbox" v-model="checked">

<div>{{checked}}</div>

<div>{{checked}}</div>

関連投稿