Vue学习6----demo练习，实现todolist效果1

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhaihaohao1/article/details/88942431

效果图：

源码：复制即可运行
App.dev

<!--demo练习1，实现todolist效果1-->
<template>
  <div id="app">
    <!--v-model把把输入框中的数据绑定到todo变量-->
    <input type="text" v-model="todo">
    <button @click="add()">+增加</button>
    <hr/>
    <ul>
      <li v-for="(item,key) in list">
        {{item}}----<button @click="idelete(key)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        todo: '',
        list: [],
      }
    },
    methods: {
      //添加数据
      add(){
        this.list.push(this.todo);
       
      },
      //删除数据
      idelete(key){
        this.list.splice(key,1);
      }
    }
  }
</script>

<style lang="scss">

</style>

源码下载：