vue记事本渲染以及交互

这篇具有很好参考价值的文章主要介绍了vue记事本渲染以及交互。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

以下是记事本的源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记事本</title>
    <style>
/* 标题 */
h1{
  margin-top: 130px;
   color: red;
    font-size: 29px;
}

/* 按钮 */
button {
    /* 去掉黑圈 */
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
/* 主体 */
body {
  line-height: 1.4em;
  background: #f5f5f5;
  color: #4d4d4d;
  min-width: 260px;
  max-width: 600px;
  margin: 0 auto;
  font-weight: 300;
}
/* 输入框 */
.new-todo{
  position: relative;
  margin: 0;
  width: 100%;
  font-size: 24px;
}
/* 列表渲染 */
.todo-list li {
  position: relative;
  font-size: 24px;
  height: 60px;
  box-sizing: border-box;
  border-bottom: 1px solid #e6e6e6;
}
/* 列表渲染 */
.todo-list li {
  word-break: break-all;
  padding: 15px 15px 15px 60px;
  display: block;
  line-height: 1.2;
  transition: color 0.4s;
}
/* 删除按键 */
.todo-list li .destroy {
  display: none;
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  width: 10px;
  height: 10px;
  font-size: 30px;
  color: black;
  margin-bottom: 11px;
}
/* 删除按键 */
.todo-list li .destroy:after {
  content: 'x';
}
/* 显示删除 */
.todo-list li:hover .destroy {
  display: block;
}
/* 删除 */
.clear-completed {
  float: right;
  position: relative;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
}


</style>
</head>
<body>
    <!-- 容器 -->
<section id="todoapp" boder="1">
    <!-- 头部输入框 -->
    <header class="header">
        <h1>小黑记事本</h1>
        <input v-model="inputValue" v-on:keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务"
        class="new-todo" />
    </header>
    <!-- 列表区域 -->
<section class="main">
    <ul class="todo-list">
        <li class="todo" v-for="(item, index) in list">
            <div class="view">
              <span class="index">{{ index + 1 }}.</span>
                <label>{{ item }}</label>
                <button @click="remove(index)" class="destroy"></button>
            </div>
        </li>
    </ul>
</section>
    <!-- 统计和清空 -->
    <footer class="footer">
        <!-- <span v-if="list.length" class="todo-count">
          <strong>{{ list.length }}</strong>
        </span> -->
        <button v-show="list.length" v-on:click="clear" class="clear-completed">
            全删
          </button>
    </footer>
</section>

</body>
<script src="D:\technology\Technology\vue.js\vue.js"></script>
<script>
// 创建 Vue 实例
let vm = new Vue({
    el:"#todoapp",
    data:{
        list: ["俯卧撑", "跑步", "游泳"],
    },
    methods:{     
        add:function(){
            let data = this.inputValue.trim()
            if (data != "")
                this.list.push(this.inputValue);
            else
                console.log("null");
        },
        remove: function (index)
        {
            console.log("remove", index);
            this.list.splice(index, 1);
        },
        // +
        clear: function ()
        {
            this.list = [];
        }
    }
})

</script>

</html>

文章来源地址https://www.toymoban.com/news/detail-846460.html

到了这里,关于vue记事本渲染以及交互的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Android记事本

    1、项目需求分析 1.1、记事功能需求分析: 1.1.1、显示记事 用户打开记事本可以看到之前所写的所有记事内容,进入主页后,软件应该从数据库中搜索出该用户所写的全部记事,并将所有的数据进行显示。 1.1.2、添加记事 设置添加按钮,点击添加按钮之后可以编辑记事的标题

    2024年02月03日
    浏览(57)
  • 11 MFC 制作记事本

    选择Menu 点击新建 将内容写入\\\"_\\\"的用 符号 将菜单加入到窗口中 右键选择添加事件处理程序 点击确定 Edit设置多行显示 Edit设置按回车能够换行 Edit设置竖直方向滚动 打开文件代码 查找与替换对话框显示(非模态对话框) 对话框消息与对话框处理函数 对话框处理函数 //note

    2024年02月11日
    浏览(43)
  • Java小程序-记事本

    摘 要 为了使自己熟悉Java编译,了解更多的面向对象语言的编程策略。进而,深入了解Java语言的操作、及原理等。因此我开发了一个记事本,使自己可以巩固知识,加深记忆。设计一个简易记事本,能够记录使用者输入的信息,同时可以实现保存输入的信息,以方便后期查看

    2024年02月04日
    浏览(57)
  • Android Studio——记事本案例

    一、布局界面         1、记事本界面布局 main_notepad.xml         2、记事本Item布局界面 activity_item.xml         3、添加、修改界面布局 activity_record.xml 二、封装记录信息实体类         记事本的每个记录都会有记录内容和记录时间这两个属性,因此需要建立一个实体类用于存

    2024年02月05日
    浏览(48)
  • Android开发_记事本(1)

    TextView中有下述几个属性: id: 为TextView设置一个组件id,根据id,我们可以在Java代码中通过findViewById()的方法获取到该对象,然后进行相关属性的设置,又或者使用RelativeLayout时,参考组件用的也是id! layout_width: 组件的宽度,一般写: wrap_content 或者 match_parent(fill_parent) ,前

    2023年04月10日
    浏览(67)
  • 简单的手机记事本哪个好用?

    在快节奏的现代生活中,我们经常需要记录下来重要的信息,而手机记事本成为了不可或缺的工具。然而,市面上琳琅满目的手机记事本软件,让人眼花缭乱,不知道该选择哪一个。 敬业签是功能强大、操作简单的手机记事本,它可以让你快速记录下重要的信息,同时还支持

    2024年02月11日
    浏览(54)
  • C# 记事本应用程序

    2024年02月10日
    浏览(49)
  • java记事本源代码

    本文仿电脑自带记事本,实现的功能有新建、新窗口、打开、保存、另存为、退出、撤销、剪切、复制、粘贴、删除、查找、查找下一个、查找上一个、替换、转到、全选、时间/日期、自动换行、缩放(放大、缩小、恢复默认大小),未实现功能有页面设置、打印、字体、状

    2024年02月10日
    浏览(50)
  • 【Java】实现记事本(完整版)

    💕💕💕大家好,这是作业侠系列之Java实现记事本,还是那句话,我的粉丝们需要源码直接qq邮箱+你需要的源码私发我即可哦,大家觉得还行的话,期待你们的三连,这也是我创作的最大动力💕💕💕 往期源码回顾: 【Java】实现绘图板(完整版) 【C++】图书管理系统(完整板

    2024年02月08日
    浏览(57)
  • Windows应用程序——记事本

    本博客介绍如何使用Visual Studio 2019设计一个Windows应用程序——记事本,通过学习,可以进一步掌握MenuStrip(菜单)、ToolStrip(工具栏)、RichTextBox(高级文本框)和StatusStrip(状态栏控件)等控件的使用,以及如何使用CommonDialog(公共对话框)实现对文本的存取、格式设置等

    2024年02月03日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包