takuya/TODO.html

## TODO.html
<html>
  <head>
    <script src="https://unpkg.com/vue"></script>
    <style media="screen">
      .done{
        text-decoration: line-through;
      }
    </style>
  </head>
<body>

<div id='main' >
  <ul>
    <todo  v-for='(item,index) in lists' :item=item :index=index :id="'todo_'+index" ></todo>
    <li><input type=checkbox  ><input type=text v-on:change='addTodo($event)'>
  </ul>
</div>
<script type="text/javascript">


var todo_list = [
  {title:"振込",checked:false},
  {title:"ボールペンを買う",checked:false},
];

todo_list = ( localStorage['todo_list'] ) ? JSON.parse(localStorage['todo_list']):todo_list;

Vue.component('checkbox', {
  props: ['item','name','value','id'],
  template:'<input v-model=item.checked type=checkbox :id=id :value=value />'
})
Vue.component('todo', {
  props: ['item','index','id'],
  template:'<li>'+
              '<checkbox :id=id :value=item.title :item=item ></checkbox>'+
              '<label :for=id  v-bind:class="{ done: item.checked }" >'+
                '<span>{{ item.title }}</span>'+
              '</label>'+
            '</li>'
})
var todo = new Vue({
  el:'#main',
  data:{
    lists:todo_list
  },
  computed:{
  },
  watch:{
    lists:{
      handler:function(){
        localStorage['todo_list']=JSON.stringify(this.lists);
        console.log(localStorage['todo_list']);
      },
      deep:true
    }
  },
  methods:{
    addTodo:function(evt){
      this.lists.push({title:evt.target.value,checked:false})
      evt.target.value='';
    }
  }

});
</script>
</body>
</html>
	<html>
	<head>
	<script src="https://unpkg.com/vue"></script>
	<style media="screen">
	.done{
	text-decoration: line-through;
	}
	</style>
	</head>
	<body>

	<div id='main' >
	<ul>
	<todo v-for='(item,index) in lists' :item=item :index=index :id="'todo_'+index" ></todo>
	<li><input type=checkbox ><input type=text v-on:change='addTodo($event)'>
	</ul>
	</div>
	<script type="text/javascript">


	var todo_list = [
	{title:"振込",checked:false},
	{title:"ボールペンを買う",checked:false},
	];

	todo_list = ( localStorage['todo_list'] ) ? JSON.parse(localStorage['todo_list']):todo_list;

	Vue.component('checkbox', {
	props: ['item','name','value','id'],
	template:'<input v-model=item.checked type=checkbox :id=id :value=value />'
	})
	Vue.component('todo', {
	props: ['item','index','id'],
	template:'<li>'+
	'<checkbox :id=id :value=item.title :item=item ></checkbox>'+
	'<label :for=id v-bind:class="{ done: item.checked }" >'+
	'<span>{{ item.title }}</span>'+
	'</label>'+
	'</li>'
	})
	var todo = new Vue({
	el:'#main',
	data:{
	lists:todo_list
	},
	computed:{
	},
	watch:{
	lists:{
	handler:function(){
	localStorage['todo_list']=JSON.stringify(this.lists);
	console.log(localStorage['todo_list']);
	},
	deep:true
	}
	},
	methods:{
	addTodo:function(evt){
	this.lists.push({title:evt.target.value,checked:false})
	evt.target.value='';
	}
	}

	});
	</script>
	</body>
	</html>