用JavaScript写记事本

最新推荐文章于 2024-01-06 08:59:49 发布

cn33333

最新推荐文章于 2024-01-06 08:59:49 发布

阅读量785

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/cn33333/article/details/127091372

版权

css

#app {
  text-align: center;
  background: #fbebd4;
  width: 480px;
  max-height: 400px;
  box-sizing: border-box;
  padding-top: 50px;
  border-radius: 5px;
  position: relative;
}
#app h2 {
  margin: 0;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  color: #6a4d52;
  font-size: 30px;
}
#app .main {
  max-height: 300px;
  width: 454px;
  margin: 5px auto 0;
  transform: translateX(1px);
}
#app ul {
  padding: 0;
  max-height: 200px;
  overflow-y: scroll;
  margin-bottom: 0;
}
#app ul::-webkit-scrollbar {
  width: 0 !important;
}
#app li {
  list-style: none;
  border-bottom: 1px solid #6a4d52;
  text-align: left;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 25px;
  color: #8895a8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 40px;
}
#app li:hover {
  background-color: #fcfaed;
}
#app li span {
  color: #6a4d52;
}
#app button {
  cursor: pointer;
  border: none;
  background-color: transparent;
}
#app input {
  height: 30px;
  font-size: 20px;
  appearance: none;
  outline: none;
  border: none;
  padding-left: 5px;
  box-sizing: border-box;
  border-radius: 5px;
  color: #6a4d52;
}

#app .bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  padding: 0 14px;
}
#app .bottom span {
  color: #929093;
}
#app .bottom span:last-child {
  cursor: pointer;
  color: #935256;
}
#app p {
  color: #929093;
  font-size: 20px;
  margin: 0;
  padding: 0;
}

js

<!-- 
  【思路一:列表渲染】
步骤一:因为列表要显示多条，所以定义一个数组把多条数据存起来。
步骤二:然后再对着li进行v-for,根据这个数组来渲染。
步骤三:使用插值语法,更改需要渲染的标题、序号。

【思路二:数据新增】
步骤四:需要拿到输入框的内容,在input输入框中使用v-model双向绑定,绑定的元素需要在data中定义。
步骤五:因为按回车就添加，意为着输入框要加事件keyup，并且只能由enter键触发。
步骤六:按回车不能直接添加到数组里,因为可能没有输入内容,所以要做一个非空判断。
步骤七:不为空,则添加到数组中。
步骤八:添加到数组后,就把输入框内容清除。(这时候可以把步骤一定义的数组死数据删掉,让列表数据展示我们输入的内容)
步骤九:完善“空空如也”显示。

【思路三:数据删除】
步骤十:给“删除按钮”添加点击事件。
步骤十一:给“清空按钮”添加点击事件,设置点击时将数组全部重新赋值为空数组,则数据全部清空。

【思路四:数据统计】
步骤十二:统计合计,就是统计数组的长度。
 -->

<body>
    <div id="app">
        <h2>记事本</h2>
        <div class="main">
            <!-- 四：给input表单添加v-model双向绑定语法 -->
            <!-- 五：添加回车点击事件add -->
            <input type="text" v-model="title" @keyup.enter="add" />
            <ul>
                <!--二： 在li标签内用v-for语法搭配key对list渲染初始数据 -->
                <li v-for="(item,index) in list " :key="item.id">
                    <!-- 三：使用差值语法，更改需要绚烂的标题，序号 -->
                    <div class="content"><span>{{index+1}}.</span>{{item.name}}</div>
                    <!-- 十：给删除按钮添加点击事件 -->
                    <button @click="list.splice(index,1)">❌</button>
                </li>
            </ul>
            <!-- 九：完善空空如也显示与隐藏 -->
            <p class="empty" v-show="list.length == 0">空空如也...</p>
        </div>
        <div class="bottom">
            <!-- 十二：将合计的默认数量改成数组长度 -->
            <span>合计:{{list.length}}</span>
            <!-- 十一：给清空按钮添加点击事件使点击后会清空list内容 -->
            <span @click="list =[]">清空</span>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                //一：在data中声明一个数组用于绚烂的初始数据
                list: [{
                    id: 1,
                    name: "吃饭饭"
                }, {
                    id: 2,
                    name: "睡觉觉"
                }, {
                    id: 3,
                    name: " 做作业"
                }],
                title: '',
            },
            methods: {

                add() {
                    //  六：如果输入为空就不往下执行，并且弹出提示框。
                   //  【v-model的trim修饰符】
                    // 作用:获取到输入框值时,可以自动帮你去除首尾空格语法:v-model.trim ="数据"
                    if (this.title.trim() == '') return alert('请输入一定内容')
                        // 七:把输入的内容添加到数组中最后一项
                    this.list.unshift({
                            id: Date.now(),
                            name: this.title,

                        })
                        // 八：把数据添加到列表后，把输入框内容清空。
                    this.title = ''
                },

            },
        })
    </script>
</body>