教你使用Vue实战笔记本案例(效果图+贡献所有代码)
程序员文章站
2022-03-10 23:14:38
一篇教你使用Vue做个笔记本小项目,实现了添加笔记,渲染笔记内容,统计行数,统计字数,以及清空所有笔记。...
学习Vue,从做实战开始,没有华丽的css装饰和复杂的html界面,只关注学习Vue本身。
功能很简单,可以直接看图即可,代码放在下面,看前记得点个赞,养成好习惯哦,关注我也可以的哦,因为我时常会出很多Vue小项目哦,当然有问题你在底下评论说话呀
Vue实战系列
先上效果图
操作一波笔记本
笔记本小项目代码
(特别提醒:导入的外链式Vue.js记得换成自己的路径)
@粗心的小伙伴
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一颗剽悍的种子</title>
<style>
header,article,footer{
width: 500px;
margin: auto;
border: 1px solid #000;
}
header{
height: 50px;
}
header input:first-child{
width: 370px;
border-radius: 0.5em;
margin-top: 6px;
margin-left: 30px;
margin-right: 30px;
height:30px;
float: left;
}
input:nth-child(2){
margin-top: 5px;
height:36px;
border-radius: 0.5em;
cursor: pointer;
}
article{
position: relative;
min-height: 200px;
}
article li span{
cursor:pointer;
}
article div:first-child{
width: 100%;
height: 30px;
position: absolute;
border: 1px solid #000;
}
footer{
height: 30px;
}
footer div{
text-align: center;
line-height: 33px;
float: left;
width: 160px;
}
footer div:last-child span{
padding: 3px;
border: 1px solid #000000;
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<center><h1>一颗剽悍的种子</h1></center>
<!-- 头部输入笔记 -->
<header>
<input v-model="content" type="text"/>
<input type="button" v-on:click="add()" value="写下" />
</header>
<!-- 文章内容 -->
<article>
<ol>
<li v-for="(item,index) in lists">
<span v-on:click="remove(index)">{{item}}</span>
</li>
</ol>
</article>
<!-- 底部操作笔记 -->
<footer>
<div>{{lists.length}} 条笔记</div>
<div>共 {{this.lists.toString().replace(/,/g,"").length}} 个字</div>
<div><span v-on:click="clear()">清空所有笔记</span></div>
</footer>
</div>
<!-- vue.js要换成自己的路径 -->
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
lists:["关注","点赞","评论","一颗剽悍的种子"],
content:""
},
methods:{
//添加笔记
add:function(){
this.lists.push(this.content);
},
//删除对应的第几条笔记
remove:function(index){
var r = confirm("确认要删除第"+(index+1)+"条笔记吗?");
if(r){
this.lists.splice(index,1);
}
},
//清除所有笔记
clear:function(){
this.lists = [];
}
}
})
</script>
</body>
</html>
最后:
为了更好的阅读体验,我把想说的话都放在了下面,嘿嘿。
我是一颗剽悍的种子 把我会的,认真的分享 是我写博客一直不变的信条。
如果你能看到这篇博文,说明咱们还是很有缘的;希望能带给你一些许帮助,创作的不易, 把我文章的知识带走,你的三连留下,点赞,评论,关注,是我最大的动力。
本文地址:https://blog.csdn.net/A_hxy/article/details/107448596
上一篇: 跳动的红心
下一篇: Lodop打印表格包含页眉和页码