脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue记事本功能

vue实现记事本功能

 更新时间：2021年06月24日 14:58:12   作者：zy6648  
这篇文章主要为大家详细介绍了vue实现记事本功能，记事本可以进行添加删除事件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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-cli创建的项目的目录结构及说明介绍

    基于vue-cli创建的项目的目录结构及说明介绍

    下面小编就为大家分享一篇基于vue-cli创建的项目的目录结构及说明介绍，具有很好的参考价值，希望对大家有所帮助
    2017-11-11
  • 详解Vue的监听属性

    详解Vue的监听属性

    这篇文章主要为大家介绍了Vue的监听属性，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2021-11-11
  • vue element和nuxt的使用技巧分享

    vue element和nuxt的使用技巧分享

    这篇文章主要介绍了vue element和nuxt的使用技巧分享，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
    2021-01-01
  • vue模版编译详情

    vue模版编译详情

    本文的初衷是想让更多哎学习的人知道并了解vue模版编译，所以文中主要以阶段流程为主，不会涉及过多的底层代码逻辑,需要的朋友可以参考一下
    2021-09-09
  • Vue项目打包、合并及压缩优化网页响应速度

    Vue项目打包、合并及压缩优化网页响应速度

    网站页面的响应速度与用户体验息息相关,直接影响到用户是否愿意继续访问你的网站,所以这篇文章主要给大家介绍了关于Vue项目打包、合并及压缩优化网页响应速度的相关资料,需要的朋友可以参考下
    2021-07-07
  • 详解Vue路由传参的两种方式query和params

    详解Vue路由传参的两种方式query和params

    这篇文章主要介绍了Vue路由传参的两种方式query和params,介绍了query和params区别与总结，结合示例代码给大家介绍的非常详细，需要的朋友可以参考下
    2022-09-09
  • 基于elementUI竖向表格、和并列的案例

    基于elementUI竖向表格、和并列的案例

    这篇文章主要介绍了基于elementUI竖向表格、和并列的案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • VUE 文字转语音播放的实现示例

    VUE 文字转语音播放的实现示例

    本文主要介绍了VUE 文字转语音播放的实现示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-02-02
  • 关于vue父组件调用子组件的方法

    关于vue父组件调用子组件的方法

    本文主要介绍了vue父组件调用子组件的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • Vue3中无法为el-tree-select设置反选问题解析

    Vue3中无法为el-tree-select设置反选问题解析

    这篇文章主要介绍了Vue3中无法为el-tree-select设置反选问题分析,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-04-04

最新评论