vue--todolist

步骤1: 看到input，就想到双向绑定，这样才能改变data数据，继而对显示也可以进行操作。所以呢，就会用到v-model这个属性，定义content用来保存input输入的值。

步骤2: 既然有列表罗列，肯定需要一个列表，list用于存储或者说记忆所有存储的内容。list是个数组。

步骤3: 有了input以及list之后，我们需要将input推送到list，我们就需要一个点击事件触发 --@click

步骤4:最后一步，把list罗列到页面上进行显示 --v-for

 

首先：将静态模板做一下：

<div id="root">
     <input type="" name="" v-model="content">
     <button @click="submit">提交</button>
     <ul>
       <li></li>
     </ul>
</div>

接下来是js部分，定义data：

data() {
      return {
        content: '',
        list: []
      }
}

步骤1和步骤2已经完成，接下来就完成步骤3和步骤4,首先做一下如何将input里的内容推送到list里，当然要写在methods里：

methods: {
      submit () {
        this.list.push(this.content)  //用push推到列表栈里
      }
}

最后一步，将列表展示在页面上：

<ul>
       <li v-for="(item, index) in list" :key="index">{{ item }}</li>
</ul>

参考原文：https://mp.weixin.qq.com/s/njREZJb1srP4tvc7fLoRNQ