Vue.js学习笔记——简单事件处理

最新推荐文章于 2021-02-28 10:38:49 发布

denglishang

最新推荐文章于 2021-02-28 10:38:49 发布

阅读量270

点赞数

分类专栏： Vue.js学习笔记前端学习笔记文章标签： Vue.js

前端学习笔记同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

Vue.js学习笔记

3 篇文章 0 订阅

订阅专栏

引用代码来源：https://cn.vuejs.org/v2/guide/

demo.html：

<!DOCTYPE html>  
<html>  
   <head>  
       <meta charset="GBK"> 
        <title></title> 
        <script src="vue.js" type="text/javascript" charset="GBK"></script>    
   </head>
    <body>
      <div id="app"> 
  <input v-model="newTodo" @keyup.enter="addTodo"> 
  <ul> 
    <li v-for="(todo,index) in todos"> 
      <span>{{ todo.text }}</span> 
      <button @click="removeTodo(index)">X</button> 
    </li> 
  </ul> 
</div> 
        <script>
        new Vue({ 
     el: '#app', 
     data: { 
       newTodo: '', 
       todos: [ 
         { text: 'Add some todos1' },
       ] 
      }, 
     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) 
        } 
      } 
    }) 
        </script>
    </body>  
</html>

效果截图：