vue实践案例+代码
- 用vue实现记事本(新增,删除,统计, 清空,隐藏底部统计栏)
- 网络应用:vue+axios实现天气预报
记事本功能
新增 / 删除 / 统计 / 清空 / 隐藏底部统计栏
整体代码
html部分:
<div id="content">
<header><h2>小王记事本</h2></header>
<section>
<!-- 双向绑定用户输入的值并按回车把新任务添加到list数组中 -->
<input v-model="values" @keyup.enter="add" type="text" autofocus placeholder="请输入任务">
<ul>
<!-- v-for按数组生成列表 -->
<li class="listBox" v-for="(item,index) in list">
{{index+1}}. {{item}}
<!-- 按索引值删除对应数据(传参) -->
<button class="button1" @click="remove(index)"><b>×</b></button>
</li>
</ul>
</section>
<footer>
<span v-show="list.length>0">总条数:{{list.length}}</span>
<button class="button2" @click="clear()" v-show="list.length>0">清除</button>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
js部分:
var content = new Vue({
el:'#content',
data:{
list:[],
values:""
},
methods:{
add:function(){
//向数组末尾添加一个值
this.list.push(this.values);
},
remove:function(index){
//数组删除splice(),从index开始删除一个
this.list.splice(index,1);
},
clear:function(index){
// 清空-把数组里面的内容清空
this.list=[];
}
}
})
css部分:
#content{
width: 600px;
text-align: center;
margin: 0 auto;
border: 2px solid rgb(160, 151, 151);
margin-top: 250px;
}
input{
width: 273px;
height: 35px;
font-size: 15px;
outline: none;
}
li {
width: 260px;
height: 35px;
line-height: 35px;
list-style-type: none;
margin-left: 120px;
margin-top: 1px;
padding-left: 20px;
border: 1px solid black;
text-align: left;
position: relative;
}
.button1{
position: absolute;
top: 50%;
right: 2%;
margin-top: -10px;
color: white;
font-size: 16px;
border: none;
background-color: white;
}
.button1:hover{
color: red;
}
.button2{
margin-left: 150px;
}
页面效果展示
结束
好啦,这个vue实例案例到这里就结束咯,希望和大家一起学习进步