vue实现记事本功能

更新时间：2020-09-02 01:18:01 作者：startmvc

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

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

效果图：