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 相关文章推荐
JavaScript下申明对象的几种方法小结
Oct 02 Javascript
关于IE7 IE8弹出窗口顶上
Dec 22 Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
May 13 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
Jul 02 Javascript
jquery选择器-根据多个属性选择示例代码
Oct 21 Javascript
js事件处理程序跨浏览器解决方案
Mar 27 Javascript
js中string和number类型互转换技巧(分享)
Nov 28 Javascript
jQuery实现导航回弹效果
Feb 27 Javascript
详解Angular模板引用变量及其作用域
Nov 23 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
Apr 08 Javascript
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
vue获取form表单的值示例
Oct 29 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
PHP无限分类的类
2007/01/02 PHP
PHP获取http请求的头信息实现步骤
2012/12/16 PHP
php不使用插件导出excel的简单方法
2014/03/04 PHP
Yii入门教程之Yii安装及hello world
2014/11/25 PHP
Yii框架form表单用法实例
2014/12/04 PHP
PHP后期静态绑定之self::限制实例分析
2018/12/21 PHP
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
2009/08/28 Javascript
利用jquery写的左右轮播图特效
2014/02/12 Javascript
JavaScript中的parse()方法使用简介
2015/06/12 Javascript
JavaScript 中对象的深拷贝
2016/12/04 Javascript
RequireJs的使用详解
2017/02/19 Javascript
原生js实现放大镜特效
2017/03/08 Javascript
妙用Angularjs实现表格按指定列排序
2017/06/23 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
2017/11/15 Javascript
vue移动端下拉刷新和上拉加载的实现代码
2018/09/08 Javascript
详解基于webpack&amp;gettext的前端多语言方案
2019/01/29 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
2019/04/29 Javascript
python定时采集摄像头图像上传ftp服务器功能实现
2013/12/23 Python
python连接mysql调用存储过程示例
2014/03/05 Python
python实现在目录中查找指定文件的方法
2014/11/11 Python
Python新手在作用域方面经常容易碰到的问题
2015/04/03 Python
Python爬虫爬取美剧网站的实现代码
2016/09/03 Python
python编辑用户登入界面的实现代码
2018/07/16 Python
对python模块中多个类的用法详解
2019/01/10 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
PyCharm如何导入python项目的方法
2020/02/06 Python
Python urllib2运行过程原理解析
2020/06/04 Python
椰子猫砂:CatSpot
2018/08/27 全球购物
师范生实习个人的自我评价
2013/09/28 职场文书
毕业典礼主持词大全
2014/03/26 职场文书
倡议书格式范文
2014/04/14 职场文书
2014年民主评议党员工作总结
2014/12/02 职场文书
入党现实表现材料
2014/12/23 职场文书
宣传部部长竞选稿
2015/11/21 职场文书
解决Goland 同一个package中函数互相调用的问题
2021/05/06 Golang
DBCA命令行搭建Oracle ADG的流程
2021/06/11 Oracle