<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
*{
padding:0;
margin:0;
border:0;
color: #666A6D;
font-size:14px;
list-style: none;
box-sizing: border-box;
}
html,body{
width: 100%;
height: 100%;
}
.box{
width: 350px;
margin:10px auto;
box-shadow: 0px 2px 3px #ccc;
}
input,
ul li,
.fooder{
width: 350px;
height: 35px;
border: 1px solid #ccc;
padding: 0 10px;
line-height: 35px;
}
.centent_left{
margin-right: 10px;
}
.centent_right{
color: red;
display: none;
float: right;
cursor: pointer;
}
li:hover .centent_right{
display: block;
}
ul li,
.fooder{
display: block;
border-top:none;
}
.fooder{
font-size: 14px;
}
.fooder_left,
.fooder_right{
font-size: 12px;
cursor: pointer;
}
.fooder_left{
float: left;
}
.fooder_right{
float: right;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div class="box" id="box">
<input type="text" @keyup.enter="add" v-model="inputValue"/>
<div class="centent">
<ul>
<li v-for="(item,index) in list">
<span class="centent_left">{{index+1}}</span>
{{item}}
<span class="centent_right" @click="remove">x</span>
</li>
</ul>
</div>
<div class="fooder" v-show="list.length!=0">
<span class="fooder_left">剩余{{list.length}}个</span>
<span class="fooder_right" @click="allremove">全部清除</span>
</div>
</div>
<script>
var vm = new Vue({
el:"#box",
data:{
list:[],
inputValue:"",
},
methods:{
add:function(){
if(this.inputValue!=""){
this.list.push(this.inputValue),
this.index ++;
this.inputValue="";
}
},
remove:function(index){
this.list.splice(index,1)
},
allremove:function(){
this.list="";
}
}
})
</script>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
