Vue

by Mingtao Sun

HTML

<script src="https://unpkg.com/vue">
</script>
<script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.core.min.js"></script>

<div id="app">
  <input type="text" v-model="userInput">
  <button v-on:click="addTodo">Add Todo</button>

  <ul>
    <li v-on:click="removeTodo(todo)" v-for="todo in todos">{{todo.value }}</li>
  </ul>
  <p>{{title}}</p>
  <p>{{title()}}</p>
</div>

JavaScript

new Vue({
  el: '#app',
  data: {
    todos: [],
    userInput: '',
    title2: 'haha'
  },
  methods: {
    title: function() {
    	return this.title2;
    },
    addTodo: function() {
      if (this.userInput.trim() == '') {
        return;
      }
      var newTodo = {
        id: _.uniqueId(),
        value: this.userInput
      };
      this.todos.push(newTodo);
      this.userInput = '';
      console.log(this.todos);
    },
    removeTodo: function(todo) {
      var id = todo.id;
      for (var i = 0; i < this.todos.length; i++) {
        if (this.todos[i].id == id) {
          this.todos.splice(i, 1);
          break;
        }
      }
    }
  }
});