vue中的指令

         <p>{{newTodo}}</p>
 <input v-model="newTodo" v-on:keyup.enter="addTodo">
 <ul>
   <li v-for="todo in todos">
     <span>{{ todo.text }}</span>
     <button v-on:click="removeTodo($index)">delete</button>
   </li>
 </ul>
 <p v-if="greeting">hello</p>

在js代码中赋值:

      var demo = new Vue({
    el : '#app',
    data : {
    newTodo:'',
    todos : [
              { text:'app app app' }
    ],
    greeting:true
    },
    methods : {
    addTodo : function() {
    var text = this.newTodo.trim();
    if(text) {
    this.todos.push({text:text});
    this.newTodo = ''
    }
    },
            removeTodo : function(index) {
            this.todos.splice(index,1);
            }
    }

你可能感兴趣的:(vue中的指令)