纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

Vue记事本实例 Vue记事本实例详解

影修   2021-06-24 我要评论
想了解Vue记事本实例详解的相关内容吗影修在本文为您仔细讲解Vue记事本实例的相关知识和一些Code实例欢迎阅读和指正我们先划重点:vue,记事本下面大家一起来学习吧

实例功能点不多主要难点在于笔记文本对象数组的添加删除以及对组件的绑定同步事件

核心代码

<section id="todoapp">
      <!-- 输入框 -->
      <header class="header">
        <h1>记事本</h1>
        <input
                v-model="note"
          autofocus="autofocus"
          autocomplete="off"
          placeholder="请输入任务"
          class="new-todo"
        />
        <div style="text-align: right;width: 90%;height: 3%;">
          <button value="记录" style="text-align: center" @click="addnote">记录</button>
        </div>

      </header>
      <!-- 列表区域 -->
      <section class="main">
        <ul class="todo-list">
          <li class="todo" v-for="(n,index) in notes">
            <div class="view">
              <span class="index">{{index+1}}</span> <label>{{n}}</label>
              <button class="destroy"></button>
            </div>
          </li>

        </ul>
      </section>
      <!-- 统计和清空 -->
      <footer class="footer">
        <span class="todo-count"><strong>{{notes.length}}</strong> items left </span>
        <button class="clear-completed" @click="delnote">
          Clear
        </button>
      </footer>
    </section>
      <script>
      let vue = new Vue({
        el:"#todoapp",
        data:{
          note:"好好学习天天向上",
          index:0,
          notes:[
                  "写代码",
                  "吃饭饭",
                  "睡觉觉"
          ]
        },
        methods:{
          addnote:function () {
            this.notes.push(this.note);
          },
          delnote:function () {
            this.notes = [];
          }
        }
      });
</script>

关于vue.js组件的教程请大家点击专题vue.js组件学习教程进行学习


相关文章

猜您喜欢

  • feignClient返回对象类型匹配 解决feignClient调用时获取返回对象类型匹配的问题

    想了解解决feignClient调用时获取返回对象类型匹配的问题的相关内容吗黄三yeah在本文为您仔细讲解feignClient返回对象类型匹配的相关知识和一些Code实例欢迎阅读和指正我们先划重点:feignClient调用,返回对象类型匹配,对象匹配下面大家一起来学习吧..
  • Vue学生管理功能 Vue实现学生管理功能

    想了解Vue实现学生管理功能的相关内容吗影修在本文为您仔细讲解Vue学生管理功能的相关知识和一些Code实例欢迎阅读和指正我们先划重点:vue,学生管理下面大家一起来学习吧..

网友评论

Copyright 2020 www.gamerfx.net 【游戏天空】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式