vue--简单的todolist

最新推荐文章于 2024-06-16 21:48:01 发布

有夏无夏

最新推荐文章于 2024-06-16 21:48:01 发布

阅读量237

点赞数

分类专栏：前端学习文章标签：前端 Vue todoList

本文链接：https://blog.csdn.net/Ada_lake/article/details/90514612

版权

前端学习专栏收录该内容

34 篇文章 0 订阅

订阅专栏

在这里插入图片描述

实现

TODOList 最简单的
1. input框中输入内容
2. 点击提交按钮
3. input框中的内容输入到下面的ul的li中

具体实现

html
- input输入内容-- v-model="inputValue"实现数据双向绑定
- button点击提交-- v-on:click="handleBtnClick"实现方法绑定
- ul的li中要存放输入后提交的内容-- v-for="item in list"实现数据循环列表显示
  再看与之相对应的script
script
- 定义一个实例
  - el 限制数据处理范围
  - data 放接管的数据
    - list内的值
    - inputValue内的值
  - method里面放绑定的方法
    - handleBtnClick
      - 将inputValue内的值放入list
      - 将inputValue内的值置为空

流程

input内获得value，value值通过v-model放在了inputValue内。
点击button后通过v-on的click方法触发handleBtnClick事件。
handleBtnClick事件就将inputValue内的值放入list内，使得li通过v-for:item in list 获得item并将其显示
handleBtnClick事件在将input中的值放入li中后就将inputValue置为空

具体代码

// Ada
<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>todoList</title>
        <script src='Vue.js'></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="inputValue"/>
            <button v-on:click="handleBtnClick">提交</button>
            <ul>
                <li v-for="item in list">{{item}}</li>
            </ul>
        </div>

        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    list:[],
                    inputValue: ''
                },
                methods: {
                    handleBtnClick: function() {
                        this.list.push(this.inputValue)
                        this.inputValue = ''
                    }
                }
            })
        </script>
    </body>
</html>