5 Vue - 备忘录 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
    .active{
        border: 1px solid red;
    }

</style>
</head>
<body>
    <!--
    备忘录：
        新增：enter新增备忘录
        删除：X删除备忘录
        统计：统计备忘录的条数
        清空：清空备忘录
        隐藏：隐藏统计和清空按钮
    -->
    <div id="app">
        <h3>备忘录</h3>
        <p>
            <!--    v-model="msg" 绑定内容，省略定位        -->
            <!--    @keyup.enter="addMsg" 回车新增        -->
            <input type="text" v-model="msg" @keyup.enter="addMsg">
            <!--   v-for="(item, index) in msgArr" 循环显示     -->
            <ul style="list-style-type: none;" v-for="(item, index) in msgArr">
                <li>
                    <span>
                        {{index+1 + " . "}}
                    </span>
                    <label>
                        {{item}}
                    </label>
                    <!-- 点击调用删除方法  -->
                    <input type="button" value="删除" @click="removeMsg(index)">
                </li>
            </ul>
        </p>
        <p>
            <!-- 绑定属性value -->
            <input type="button" :value="msgArr.length" v-show="msgArr.length>0">
            <input type="button" value="清空" v-show="msgArr.length>0" @click="clearArr">
        </p>

    </div>

    <script>
        var app = new Vue({     // 创建 Vue 应用
            el: '#app',         // 挂载点，挂载元素
            data: {             // 数据（响应式）
                // 存储用户输入
                msgArr: [],
                // 用户输入内容
                msg: ""

            },
            methods: {
                // 用户输入内容添加到数据
                addMsg(){
                    this.msgArr.push(this.msg);
                },
                // 清空数据和输入内容
                clearArr(){
                    this.msgArr=[];
                    this.msg="";
                },
                // 删除
                removeMsg(index){
                    // 根据索引进行删除，每次删除一个
                    this.msgArr.splice(index, 1);
                }
            }


        })
    </script>
</body>
</html>

 

posted @ 2021-04-11 20:23  栗子测试开发  阅读(78)  评论(0)    收藏  举报