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 相关文章推荐
Js+XML 操作
Sep 20 Javascript
js一组验证函数
Dec 20 Javascript
JavaScript 学习初步 入门教程
Mar 25 Javascript
dreamweaver 8实现Jquery自动提示
Dec 04 Javascript
node.js中的fs.futimes方法使用说明
Dec 17 Javascript
JavaScript中使用Math.floor()方法对数字取整
Jun 15 Javascript
浅析angularJS中的ui-router和ng-grid模块
May 20 Javascript
分分钟玩转Vue.js组件
Oct 25 Javascript
详解jQuery中基本的动画方法
Dec 14 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
Feb 18 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
Jun 13 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
Oct 21 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的特殊设置
2006/10/09 PHP
基于PHP创建Cookie数组的详解
2013/07/03 PHP
JS仿flash上传头像效果实现代码
2011/07/18 Javascript
使用jQuery validate 验证注册表单实例演示
2013/03/25 Javascript
深入了解javascript中的prototype与继承
2013/04/14 Javascript
js函数返回多个返回值的示例代码
2013/11/05 Javascript
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
JavaScript运算符小结
2015/06/03 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
p5.js入门教程之小球动画示例代码
2018/03/15 Javascript
react中实现搜索结果中关键词高亮显示
2018/07/31 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
nodejs对mongodb数据库的增加修删该查实例代码
2020/01/05 NodeJs
微信小程序后端实现授权登录
2020/02/24 Javascript
Vue循环遍历选项赋值到对应控件的实现方法
2020/06/22 Javascript
举例讲解Python中装饰器的用法
2015/04/27 Python
python3.5仿微软计算器程序
2020/03/30 Python
python保存文件方法小结
2018/07/27 Python
python 批量解压压缩文件的实例代码
2019/06/27 Python
python实现的生成word文档功能示例
2019/08/23 Python
python函数修饰符@的使用方法解析
2019/09/02 Python
python 实现矩阵按对角线打印
2019/11/29 Python
Python+Xlwings 删除Excel的行和列
2020/12/19 Python
html5 postMessage前端跨域并前端监听的方法示例
2018/11/01 HTML / CSS
Urban Outfitters英国官网:美国平价服饰品牌
2016/11/25 全球购物
财务管理职业生涯规划书
2014/02/26 职场文书
三方合作协议书范本
2014/04/18 职场文书
工伤事故赔偿协议书
2014/10/27 职场文书
诚信承诺书
2015/01/19 职场文书
ktv服务员岗位职责
2015/02/09 职场文书
青年文明号创建口号大全
2015/12/25 职场文书
2019年大学生学年自我鉴定!
2019/03/25 职场文书
matlab xlabel位置的设置方式
2021/05/21 Python
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python
一文彻底理解js原生语法prototype,__proto__和constructor
2021/10/24 Javascript