vue实现记事本功能


Posted in Javascript onJune 26, 2019

本文实例为大家分享了vue实现记事本功能的具体代码,供大家参考,具体内容如下

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>记事本</title> 
<meta http-equiv="X-UA-Compatible" content="IE-edge"> 
<meta name="viewport" content="width=device-width,initial-scale=1"> 
<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="external nofollow" > 
<script type="text/javascript" src="./vue.js"></script>
</head> 
 <body> 
  <div class="container" id="app"> 
   <div class="row"> 
    <div class="col-md-6 "> 
     <h1 class="text-succeed">{{title}}</h1> 
     <input type="text" name="text" placeholder="填写事务" v-model="newThing"/> 
     <button type="button" class="btn text-active" v-on:click="addThing" v-on:keyup.enter="addThing">添加事务</button> 
    </div> 
   </div> 
   <div class="row"> 
    <div class="col-md-3 "> 
     <div class="thumbnail"> 
      <ul> 
       <li v-for="(item,index) in things" class="text-center text-info" v-show="item.show">{{item.thing}}
       <button class="btn btn-default bg-info" v-on:click="removeThing(index)" v-model="index">删除</button></li> 
      </ul> 
     </div> 
    </div> 
   </div> 
  </div>  
</body> 
<script type="text/javascript"> 
 var vue=new Vue({ 
  el:'#app', 
  data:{ 
   title: '记事本', 
   things:[ 
    { 
     thing:'', 
     show:false 
    } 
   ], 
   newThing:'', 
   message:'待填写的事务为空!!' 
  }, 
  methods:{ 
   addThing:function(){ 
    if(this.newThing){ 
      this.things.splice(0,0,{ 
      thing:this.newThing, 
      show:true 
     }); 
      this.newThing='' 
    }else{ 
     alert(this.message) 
    }   
   }, 
   removeThing:function(index){ 
    this.things[index].show=false 
   }  
  } 
 }); 
</script> 
</html>

效果图:

vue实现记事本功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
node.js中的buffer.length方法使用说明
Dec 14 Javascript
js实时获取并显示当前时间的方法
Jul 31 Javascript
js实现文件上传表单域美化特效
Nov 02 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
Dec 09 Javascript
jQuery拖动元素并对元素进行重新排序
Dec 30 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
Mar 08 Javascript
详解react-router如何实现按需加载
Jun 15 Javascript
详解开源的JavaScript插件化框架MinimaJS
Oct 26 Javascript
Vuex入门到上手教程
Jun 20 Javascript
基于layui轮播图满屏是高度自适应的解决方法
Sep 16 Javascript
详解vue中多个有顺序要求的异步操作处理
Oct 29 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
Nov 04 Javascript
ES6 Set结构的应用实例分析
Jun 26 #Javascript
vue.js实现备忘录demo
Jun 26 #Javascript
ES6 Map结构的应用实例分析
Jun 26 #Javascript
vue实现日历备忘录功能
Sep 24 #Javascript
ES6 Array常用扩展的应用实例分析
Jun 26 #Javascript
Vue.js实现备忘录功能
Jun 26 #Javascript
微信小程序数据统计和错误统计的实现方法
Jun 26 #Javascript
You might like
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
实用函数2
2007/11/08 PHP
php通过各种函数判断0和空
2020/07/04 PHP
javascript学习笔记(五)正则表达式
2011/04/08 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
2013/12/16 Javascript
将查询条件的input、select清空
2014/01/14 Javascript
jQuery中parents()和parent()的区别分析
2014/10/28 Javascript
简介JavaScript中的push()方法的使用
2015/06/09 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
2015/10/29 Javascript
新手学习前端之js模仿淘宝主页网站
2016/10/31 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
2016/12/08 Javascript
Vue实现virtual-dom的原理简析
2017/07/10 Javascript
AngularJS中table表格基本操作示例
2017/10/10 Javascript
webpack 从指定入口文件中提取公共文件的方法
2018/11/13 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
2019/07/22 Javascript
react组件基本用法示例小结
2020/04/27 Javascript
Python数据结构与算法之图结构(Graph)实例分析
2017/09/05 Python
用python实现k近邻算法的示例代码
2018/09/06 Python
python3应用windows api对后台程序窗口及桌面截图并保存的方法
2019/08/27 Python
python selenium自动化测试框架搭建的方法步骤
2020/06/14 Python
python连接mysql有哪些方法
2020/06/24 Python
Django数据模型中on_delete使用详解
2020/11/30 Python
印度最大的酒店品牌网络:OYO Rooms
2016/07/24 全球购物
日本无添加化妆品:HABA
2016/08/18 全球购物
澳大利亚领先的美容护肤品零售商之一:SkincareStore
2018/01/22 全球购物
优瑞自动咖啡机官网:Jura
2018/09/29 全球购物
临床医学专业个人的自我评价
2013/09/27 职场文书
校运会广播稿100字
2014/01/27 职场文书
公立医院改革实施方案
2014/03/14 职场文书
政府绩效管理实施方案
2014/05/04 职场文书
电子商务专业应届生求职信
2014/05/28 职场文书
2015年医院保卫科工作总结
2015/07/23 职场文书
python for循环赋值问题
2021/06/03 Python
世界无敌的ICOM IC-R9500宽频接收机
2022/03/25 无线电
《吸血鬼幸存者》新内容发布 追加多个全新模式
2022/04/07 其他游戏
浅谈Redis的事件驱动模型
2022/05/30 Redis