您的位置：首页 > 产品设计 > UI/UE

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

2018-02-06 11:24 856 查看
引用代码来源：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>

效果截图：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航