vue2视频教程系列第十三节-todolist

vue视频教程系列第十三节-todolist

今天我将跟大家一起做一个项目，以此来巩固一下之前所学习的基础知识。

       首先介绍一下这个小项目的功能需求：在input框里输入内容后，点击提交按钮，会将所有提交的内容在列表里罗列出来。

 功能介绍完后，我们不着急做，先来分析一下步骤，一个小目标一个目标地去完成〜下面来分解功能：

 步骤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>

看一下效果吧！哇吼！欢呼吧！是不是有一种成就感呢，短短几天就可以做一个小项目了呢！

只要坚持不懈，持之以恒，总会有收获的！加油💪接下来我们将去挑战更艰巨的任务！

微信：duzhan2018