【Vue.js】動的なデータの反映まとめ

Vue.jsの十八番であるリアクティブなデータの反映の種類をまとめてみました

ディレクティブ等	紐付け先	どうしたいか	実例
v-model	data	入力内容や選択内容を動的にしたい	input(type="text", v-model="todo.message")
v-bind	data	htmlタグの属性を動的にしたい	img(:src="todo.image)
{{ }}	data	表示させる文字を動的にしたい	p{{ todo.message }}
{{ }}	computed	dataの値を変化させたものを動的にしたい	p{{ remaining }}

#v-model

<template>
  <input type="text" v-model="todo.title">
</template>

<script>
let vm = new Vue({
  el: '#app',

  data: {
    todo: {
      { title: '' },
    }
  },
})
</script>

#v-bind

<template>
  <img :src="todo.image">
</template>

<script>
let vm = new Vue({
  el: '#app',

  data: {
    newItem: '',
    todo: {
      { title: 'task1', image: "" },
    }
  },
})
</script>

#{{ }}

###dataオプションと連動

<template>
  <span>{{ todos[0].title }}</span>
</template>

<script>
let vm = new Vue({
  el: '#app',

  data: {
    todo: {
      { title: 'task1', isDone: false },
    }
  },
})
</script>

###computedオプションと連動

<template>
  <span>{{ remaining }}</span>
</template>

<script>
let vm = new Vue({
  el: '#app',

  data: {
    todos: [
      { title: 'task1', isDone: true },
      { title: 'task2', isDone: false },
      { title: 'task3', isDone: false },
    ]
  },
  computed: {
    remaining: function(){
      let remainItems = this.todos.filter(function(todo){
        return !todo.isDone;
      });
      return remainItems.length;
    }
  }
})
</script>