07-备忘录小案例 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        请输入内容：<input type="text" v-model="content">   <button v-on:click="add">添加到备忘录</button>
        <ul>
            <li v-if="items.length == 0" style="color: red">当前备忘录中没有数据</li>
            <li v-if="items.length!=0" v-for="(item,index) in items">{{index+1}}.{{item}}  <a href="javascript:;" v-on:click="remove(index)">删除</a></li>
        </ul>

        <button v-on:click="clear">清空备忘录</button>
        <h3>当前备忘录共：{{items.length}} 条数据</h3>
    </div>
</body>
</html>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            items:["今天晚上吃什么", "今天晚上一起打游戏", "今天晚上一起学习"],
            content:"",
        },
        methods: {
            add(){
                if(!this.content){
                    alert("请输入内容")
                    return false;
                }

                this.items.push(this.content)

                this.content = ""
            },
            clear(){
                this.items = ""
            },
            remove(index){
                this.items.splice(index, 1);//按下标删除元素   index：表示下标   1：表示从下标开始删除的元素
            }
        }
    });
</script>
posted @ 2021-09-23 19:29  不是孩子了  阅读(38)  评论(0)    收藏  举报