vue实现记事本功能

2019-11-19 11:16:11

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了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>

效果图：