【Vue】记事本

于 2021-01-12 11:33:24 发布
阅读量124 收藏 1
点赞数
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54468192/article/details/112513156
版权

文章目录

效果

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>记事本</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <style>
        .row {
            margin-top: 20px;
        }
    </style>
  </head>
  <body>
    <div id="app">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <h2 style="text-align: center;">记事本</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <input type="text" class="form-control" placeholder="请输入待办事项" v-model="inputText" @keyup.enter="add">
                </div>
            </div>
            <div v-for="(item, index) in myList">
                <div class="row">
                    <div class="col-md-7 col-md-offset-2">
                        <span>{{index+1}}.{{item}}</span>
                    </div>
                    <div class="col-md-1">
                        <span class="glyphicon glyphicon-remove" aria-hidden="true" style="margin-left: 60px; color: red;" @click="remove(index)"></span>
                    </div>
                </div>
            </div>
            <div class="row" v-show="myList.length!=0">
                <div class="col-md-7 col-md-offset-2">
                    <span class="badge">{{myList.length}}</span>
                </div>
                <div class="col-md-1">
                    <button class="btn btn-default" style="margin-left: 36px;" @click="clear">清空</button>
                </div>
            </div>
        </div>
    </div>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                inputText: "",
                myList: []
            },
            methods: {
                add: function() {
                    this.myList.push(this.inputText);
                },
                remove: function(index) {
                    this.myList.splice(index, 1);
                },
                clear: function() {
                    this.myList = [];
                }
            }
        });
    </script>
  </body>
</html>

思路

Vue+Bootstrap

添加

将表单中输入的数据与data对象中的inputText建立双向绑定，为input表单添加监听事件，当回车键按下后，将inputText添加到数组中，从而实现待办事项的添加操作

删除

获取要删除事项在数组中的索引，然后用splice方法删除即可

清空

将数组置空，就可以实现清空操作

计数

事项的个数和数组的长度是一致的，因此，可以利用数组的长度来实现计数的功能

「已注销」
关注
专栏目录
VUE 记事本笔记
m0_73495603的博客
09-26 700
记事本笔记
vue记事本
oo_ring的博客
10-03 412
深夜码字！ 效果： 点击回车添加内容 1.在vuex创建一个数组存放数据，以及点击添加/删除的方法 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { list:[] }, mutations: { //添加数据 setAdd(state,data){ state.lis...
Bootstrap基本模板
qq_43408070的博客
11-20 1410
下面展示一些 内联代码片。 // A code block var foo = 'bar'; <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devi
bootstrap 模板
zhanyouwen的博客
06-17 2049
bootstrap 模板
bootstrap模板
09-28
大图 首页支持图片轮播 非常酷炫 适用于个人网站
Vue记事本.html
08-17
VUE基础小黑记事本，html，js代码&css样式，可直接打开查看。
vue记事本案例（父子组件通信）
08-20
在这个"vue记事本案例"中，我们重点探讨的是Vue.js中的父子组件通信，以及如何实现新增待办、删除待办（一键清空）、待办数量统计和持久化存储功能。 首先，让我们关注父子组件通信。在Vue.js中，父子组件之间的...
vue实现记事本功能
10-16
在本文中，我们将深入探讨如何使用Vue.js框架来实现一个简单的记事本功能。Vue.js是一个轻量级的前端JavaScript库，它允许开发者通过声明式的方式构建用户界面。在这个示例中，我们将创建一个基本的记事本应用，具备...
Vue脚手架记事本案例
10-03
总结TODOList案例： 组件化编码流程： ... 2.实现动态组件：考虑好数据的存放位置，数据是一个组件在用还是一些组件在用： ...props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。
Bootstrap模板
08-04
Bootstrap是Twitter推出的一个用于前端开发的开源工具包。非常全面的模板工具，节约了大量时间，更快的学习前端。
bootstrap模板（包括HTML和jsp）
12-28
bootstrap模板包含html,jsp代码，从登陆到后台管理界面都有
Bootstrap 模板一套
06-07
AdminLTE是一款基于bootstrap的后台管理系统的通用模板UI，它的样式美观且较为符合大多数后台管理系统的需求，典型的上|左右|下的布局形式。并且提供了一整套我们开发的时候可能用到的UI样式，比如表格，表单，图表，日历等。非常适合像我这样对样式编排不太擅长的后端开发者。有了它，我们可以不用自己去写很多复杂的html，css。而把更多时间和精力留在后台的开发上
Bootstrap网站模板
07-31
Bootstrap网站模板 供大家学习参考 博客地址：http://blog.csdn.net/itmyhome1990/article/details/38122707
Bootstrap 模板
21号先锋者
02-07 675
@{ Layout = null; } &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"/&gt;&lt;!--设置字符集utf-8编码--&gt; &lt;!--注意:bootstrap不支持IE的兼容模式,下面的一句代码在IE浏览器中运行最新渲染模式--&gt;
Bootstrap简单模板
YarMing的博客
04-24 1608
&lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;!--IE内核使用更高的渲染展示效果--&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge&
Bootstrap,网站模板,bootstrap模板
GBin1.com
04-10 2433
日期：2013-3-31  来源：GBin1.com Charisma是一套全功能的，免费，会员质量的响应式HTML5管理员界面模板，基于"Bootstrap"，拥有了9套不同的主题颜色内容，可以满足你的不同需要！ 在线演示 主要特性： 9套不同的主题完全响应式，针对了移动设备和触摸设备优化基于bootstrap，同时也支持jQuery UIHTML5/CSS3
bootstrap网站模板
08-29
bootstrap自适应网站模板
vue 实现简易记事本
最新发布
01-31
Vue实现简易记事本可以分为以下几个步骤： 1. 创建Vue应用：使用Vue的脚手架工具(如Vue CLI)来创建一个新的Vue项目。 2. 组件设计：将记事本的不同功能块划分为不同的组件，例如头部组件、便签列表组件和便签编辑...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值