学习vue.js第二节——TodoList案例

最新推荐文章于 2024-11-07 14:33:20 发布

ducode

最新推荐文章于 2024-11-07 14:33:20 发布

阅读量136

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5b865aa2e51d4538cf53ecef

该博客介绍了一个TodoList案例，在input输入值后点击添加，触发handleBtnCilck方法，将inputValue数据存入list数组并展示在li标签，同时清空input；点击取消，触发handleBtnClickEmpty方法，清空list数组和input数据。

<div id="app">
    <input type="text" name="name" v-model="inputValue">
    <button v-on:click="handleBtnCilck">提交</button>
    <button v-on:click="handleBtnClickEmpty">清空</button>
    <ul>
      <li v-for="item in list">{{item}}</li>
    </ul>
</div>

<script>
   var vm = new Vue({
    el:'#app',
    data:{
       list:[], 
       inputValue:''
    },
    methods:{  //方法
     handleBtnCilck: function(){
        this.list.push(this.inputValue),
        this.inputValue = ''
     },
     handleBtnClickEmpty: function(){
        vm.$data.list = [],
        this.inputValue = ''
     }
    }
   })
</script>
复制代码

本案例，是一个TodoList案例,当你在input输入值，点击添加，触发handleBtnCilck方法，获取inputValue数据push到list数组，list数组接收到数据则会展示到li标签里面，同时会清空input，点击取消，触发handleBtnClickEmpty方法，清空list数组和input数据。

转载于:https://juejin.im/post/5b865aa2e51d4538cf53ecef