用vue实现一个记事本的功能

最新推荐文章于 2024-05-19 15:23:32 发布

日京

最新推荐文章于 2024-05-19 15:23:32 发布

阅读量513

点赞数

分类专栏：前端文章标签： vue js vue.js

本文链接：https://blog.csdn.net/weixin_43719616/article/details/109629243

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
        <title>日京的记事本</title>
        <script src="/statics/vue.js"></script>
    </head>
<body>
    <section id="todoapp">
        <header>
            <h1>日京的记事本</h1>
            <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="输入">
        </header>
        <section>
            <ul>
                <li v-for="(item,index) in list">
                    <div>
                        <span>{{index+1}}</span>
                        <label for="">{{item}}</label>
                        <button @click="remove(index)">删除</button>
                    </div>
                </li>
            </ul>
        </section>
        <footer>
            <span v-show="list.length!=0">
                <strong>{{list.length}}</strong>item left
            </span>
            <button v-show="list.length!=0" @click="clear">清空</button>
        </footer>
    </section>
    <footer>

    </footer>
</body>
<script>
    var app=new Vue({
        el:"#todoapp",
        data:{
            list:["whj","hhh","xxx"],
            inputValue:"加油哦"
        },
        methods:{
            add:function(){
                this.list.push(this.inputValue)
            },
            remove:function(index){
                console.log("删除")
                console.log(index)
                this.list.splice(index,1)
            },
            clear:function(){
                this.list=[];
            }
        }
    })
</script>
</html>

日京

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用vue实现一个记事本的功能

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>日京的记事本</title> <script src="/statics/vue.js"></script> </head><body> <section id="todoapp">
复制链接

扫一扫