hualinux 进阶 vue 1.11：todolist（一）功能开发

最新推荐文章于 2021-05-03 13:32:54 发布

hualinux

最新推荐文章于 2021-05-03 13:32:54 发布

阅读量137

点赞数

分类专栏：进阶篇3 vue.js专业前端入门文章标签： hualinux vue vue todolist todolist 功能开发 todolist（一）功能开发

本文链接：https://blog.csdn.net/hualinux/article/details/115467027

版权

进阶篇3 vue.js专业前端入门专栏收录该内容

32 篇文章 4 订阅

订阅专栏

一、需求

二、分析

三、实现代码

我这里写一个综合例子todolist（待办事情），列出待办事情的列表。

一、需求

如下图所示：我们希望，当在输入框中输入内容，点提交的时候，内容显示在列表中

二、分析

为了保存上面的数据，我们可以使用js的数组list功能，如果忘记了可以回看一下js数组。

添加元素可以使用js数组的push方法

三、实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue test</title>
    <script src="static/js/vue.js"></script>
</head>
<body>
<div id="root">
    <div>
        <input v-model="note"/>
        <button v-on:click="myClick">提交</button>
    </div>
    <ul>
        <li v-for="(item,index) of list" style="list-style: none">{{item}}</li>
    </ul>
</div>

<script>
    new Vue({
        el: "#root",
        data: {
            note: '',
            list: []
        },
        methods: {
            myClick: function (){
                this.list.push(this.note)
                this.note=''
            }
        }
    })
</script>
</body>

</html>

PS：引入的vue.js代码路径不同的话要修改一下。

效果如下：

随便输入一些数据点提交试下，

hualinux

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
hualinux 进阶 vue 1.11：todolist（一）功能开发

目录一、需求二、分析三、实现代码我这里写一个综合例子todolist（待办事情），列出待办事情的列表。一、需求如下图所示：我们希望，当在输入框中输入内容，点提交的时候，内容显示在列表中二、分析为了保存上面的数据，我们可以使用js的数组list功能，如果忘记了可以回看一下js数组。添加元素可以使用js数组的push方法三、实现代码<!DOCTYPE html><html lang="en"><head> &.
复制链接

扫一扫