vue.js step1

by icoxfog417

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="todoApp">
  <h2 v-bind:style="fontStyle">{{ title }}</h2>
  <input type="text" v-model="todo" v-on:keyup.enter="addTodo">
  <div>
    <div v-for="t in todos" :key="t.id" 
         v-bind:class="['todo-default', t.doing ? 'todo-doing' : '']"
         v-on:click="begin(t)">
      {{t.name}}
    </div>
  </div>
</div>

CSS

.todo-default {
  padding: 5px;
  border-bottom: 1px solid silver;
}
.todo-doing {
  background-color: floralwhite;
}

JavaScript

var app = new Vue({
  el: '#todoApp',
  data: {
  	title: "Welcome to Vue.js",
    fontStyle: {
    	fontSize: "20px",
    },
    todo: "",
    todos: []
  },
  methods: {
    addTodo: function() {
    	this.todos.push({
      	id: this.todos.length,
      	name: this.todo,
        doing: false
      })
      this.todo = ""
    },
    begin: function(todo){
    	todo.doing = !todo.doing;
    }
  }
})