本文实例为大家分享了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>
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
© 版权声明
THE END
暂无评论内容