大佬教程收集整理的这篇文章主要介绍了vue_记事本,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
HTML + CSS + Vuejs基于数据的开发模式
以前开发是基于DOM的开发模式,本案例中基于数据的开发模式
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html" charset="UTF-8" />
<title>记事本</title>
<meta name="robots" content="noindex,nofollow" />
<meta name="googlebot" content="noindex,nofollow" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
<!--主体区域-->
<h1 class="biaoti">notepad记事本</h1>
<section id="todoapp">
<!--输入框-->
<header class="header">
<input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="输入任务"
class="new-todo">
</header>
<!--列表区域-->
<section class="main">
<ul class="todo-list">
<li class="todo" v-for="(item,index) in list">
<div class="view">
<span class="index">{{index+1}}.</span>
<label>{{item}}</label>
<button class="destroy" @click="remvoe (index)">删除</button>
</div>
</li>
</ul>
</section>
<!--统计清空-->
<footer class="footer">
<div>
<span class="left" v-if="list.length!=0"><strong>{{list.length}}</strong>  items </span>
<span class="right" @click="clear" v-show="list.length!=0"><button>Clear</button></span>
</div>
</footer>
</section>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#todoapp",
data: {
list: ["今日任务1", "今日任务2", "今日任务3"],
inputValue: "哈哈小恶习"
},
methods: {
add: function () {
this.list.push(this.inputValue)
},
remvoe: function (index) {
this.list.splice(index, 1)
},
clear: function () {
this.list = [];
}
},
})
</script>
</html>
index.css
* {
padding: 0;
margin: 0;
}
#todoapp {
width: 300px;
margin: 5px auto;
box-shadow: 0px 3px 10px 2px rgba(0,0,0,.1);
}
.biaoti {
font:normal 200 34px '微软雅黑' ;
color: rgb(219, 82, 82);
text-align: center;
padding-top:100px ;
padding-bottom: 10px;
}
.new-todo{
width: 100%;
height: 40px;
padding-left:10px;
color: rgb(88, 88, 88);
box-sizing:border-box;
border: 1px solid rgb(236, 236, 236);/*这里之前宽写成100%就出现对不齐的问题*/
}
.new-todo:focus{
outline: none;
}
.footer{
position: relative;
width:100%;
height: 40px;
box-sizing:border-box; /*border-box你想要设置的边框和内边距的值是包含在width内的.不包含margin*/
border: 1px solid rgb(236, 236, 236);
background-color: white;
}
.footer span{
font-size: 12px;
color: rgb(131, 131, 131);
float: left;
line-height: 40px;
}
.left{
margin-left: 10px;
}
.right{
margin-left: 170px;
}
.todo{
list-style: none;
font-size: 14px;
font-family: '微软雅黑';
color: rgb(88, 88, 88);
box-sizing:border-box;
width: 100%;
height: 40px;
line-height: 40px;
border: 1px solid rgb(236, 236, 236);
background-color: white;
}
.view{
position: relative;
margin-left:10px ;
}
.view label{
width: 200px;
height: 40px;
position: absolute;
overflow: hidden; /* 超出的文本隐藏*/
text-overflow: ellipsis; /* 溢出用省略号显示*/
white-space:nowrap; /* 溢出不换行*/
}
.destroy{
position: absolute;
right: 10px;
top:9px;
font-size: 12px;
font-family: '微软雅黑';
outline:none;
border: 1px solid rgb(236, 236, 236);
color: rgb(255, 111, 111);
display: none;
}
.view:hover .destroy{ /*这里的.destroy和前面的要有空格,不然奏效*/
display: block;
}
.left strong{
font-weight: 400;
}
.footer button{
position: absolute;
right: 10px;
top: 9px;
background-color: white;
border: 0px;
outline:none;/*去掉选中按钮是边框的颜色*/
font-size: 12px;
font-family: '微软雅黑';
color: rgb(131, 131, 131);
}
以上是大佬教程为你收集整理的vue_记事本全部内容,希望文章能够帮你解决vue_记事本所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。