vue.js实现备忘录demo

2024-10-15 23:02:15

本文实例为大家分享了vue.js实现备忘录demo的具体代码，供大家参考，具体内容如下

代码：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
     content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="vue.js"></script>
  <style>
    /*当任务完成时，勾选多选框后的样式*/
    .finish{
      text-decoration:line-through;
      color:#aaabac;
    }
  </style>
</head>
<body>
<div id="app">
  <!--输入框：v-model用于将输入内容跟content进行数据绑定，keydown.enter用于监听键盘回车事件-->
  <input type="text" v-model="task.content" placeholder="edit" @keydown.enter="addTask">
  <!--任务列表显示区域-->
  <div id="list">
    <!--用v-if判断当前是否有任务，任务数组list长度为0时显示暂无任务-->
    <p v-if="list.length===0" style="position:relative;left:20px;top:20px;color:#AAAAAA">暂无任务</p>
    <!--用v-for遍历输出任务数组中的任务-->
    <div id="unit" v-for="(item,index) in list" >
      <!--多选框的click事件监听状态（是否勾选）的改变-->
      <input type="checkbox" @click="changeState(index)" >
      <!--动态添加样式class='finish'-->
      <span :class="{'finish':item.finished}">{{ index+1 }}.{{ item.content }}</span>
      <!--删除按钮：点击按钮执行deleteTak函数，需要注意要传入索引值删除指定任务-->
      <button style="background:red;color:white;" @click="deleteTask(index)">delete</button>
    </div>
  </div>
</div>

</body>
<script>
  let vm=new Vue({
    el:"#app",
    data:{
      task:{
        content:'',
        finished:false,
        // deleted:false,
      },

      list:[],

      addTask(){
        this.list.push(this.task);
        this.task={
          content:'',
          finished:false,
          // deleted:false,
        }
      },

      changeState(index){
        let nowState=this.list[index].finished;
        this.list[index].finished=!this.list[index].finished;
      },

      deleteTask(index){
        this.list.splice(index,1);
      }
    },
  });
</script>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Vuex2.0+Vue2.0构建备忘录应用实践

一.介绍Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,适合于构建中大型单页应用. 1.什么是状态管理模式? 看个简单的例子: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content=&q
vue.js实现备忘录功能的方法

这个vue实现备忘录的功能demo是K在github上找到的,K觉得这是一个用来对vue.js入门的一个非常简单的demo,所以拿在这里共享一下. (尊重他人劳动成果,从小事做起~ demo原github地址:https://github.com/vuejs/vue) 一.实现效果二.代码展示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>备忘录&l
vue实现日历备忘录功能

用vue写了个日历备忘录的功能,省略了备忘录的增删改查功能. 直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>备忘录</title> <style type="text/css"> #box{ width: 469px; } /*日历*/ *{ padding:
Vue.js实现备忘录功能

本文实例为大家分享了Vue.js实现备忘录的具体代码,供大家参考,具体内容如下效果展示: html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8">  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-
vue.js实现备忘录demo

本文实例为大家分享了vue.js实现备忘录demo的具体代码,供大家参考,具体内容如下代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale
Vue.js 中制作自定义选择组件的代码附演示demo

定制 select 标签的设计非常困难.有时候,如果不使用样式化的 div 和自定义 JavaScript 的结合来构建自己的脚本,那是不可能的.在本文中,你将学习如何构建使用完全自定义 CSS 设置样式的 Vue.js 组件. Demo: https://codesandbox.io/s/custom-vuejs-select-component-8nqgd HTML <template> <div class="custom-select" :tabindex=&
用Go+Vue.js快速搭建一个Web应用(初级demo)

Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式.本文给大家介绍用Go+Vue.js快速搭建一个Web应用(初级demo). 环境准备: 1. 安装go语言,配置go开发环境: 2. 安装node.js以及npm环境: Gin的使用: 为了快速搭建后端应用,采用了Gin作为Web框架.Gin是用Golang实现的一种Web框架,api非常友好,且拥有出色的路由性能和详细的错误提示,如果你想快速开发一个高性能的生产环境,Gin是一个不错的选择. 下载和安装Gin:
vue.js配合$.post从后台获取数据简单demo分享

首先导入 <script type="text/javascript" src="/island/stage/js/vue.min.js"></script> html样式: <div id="main-content" class="wrap-container zerogrid"> <article id="news_content" v-for="i
Vue.js实现的表格增加删除demo示例

本文实例讲述了Vue.js实现的表格增加删除demo.分享给大家供大家参考,具体如下: Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 使用本站在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun,得到如下所示的运行效果: 具体代码如下: <!DOCTYP
Vue.js实现模拟微信朋友圈开发demo

我用Vue.js实现微信朋友圈的一些功能,实现展示朋友圈,评论,点赞. 先构造一个vue的实例,对会更改的数据进行双向绑定, 我用JSON伪造模版数据,先实现显示朋友圈的效果,使用v-for方法去循环ALLFeeds中的每一项item生成包括name.content.time在内的各项数据. 微信朋友圈实现效果 HTML代码: <div class="border" v-for="item in AllFeeds" track-by="$index&
用 Vue.js 递归组件实现可折叠的树形菜单(demo)

在Vue.js中一个递归组件调用的是其本身,如: Vue.component('recursive-component', { template: ` <recursive-component></recursive-component>` }); 递归组件常用于在blog上显示注释.嵌套的菜单,或者基本上是父和子相同的类型,尽管具体内容不同.例如: 现在给您演示一下如何有效地使用递归组件,我将通过建立一个可扩展/收缩的树形
Vue.js 2.5新特性介绍(推荐)

TypeScript TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程.2012年十月份,微软发布了首个公开版本的TypeScript,在2013年6月19日,微软发布了TypeScript 0.9的正式版本,到目前为止,TypeScript已发展到2.x版本安装TypeScript 安装TypeScript主要有两种方式: 通过npm方式安装(Node.js包管理器) 安装TypeS

vue.js实现备忘录demo

相关推荐

随机推荐