<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自己写一个</title>
<style>
.head1{
width: 600px;
height: 50px;
background-color: seagreen;
}
.dbtn{
width: 600px;
height: 50px;
}
li{
list-style: none;
width: 500px;
margin-top: 10px;
background-color: seashell;
line-height:50px;
min-height: 50px;
position: relative;
}
button{
width: 60px;
height: 20px;
position: absolute;
bottom: 0px;
bottom: 0px;
right: 0px;
}
.act1{
background: greenyellow;
}
.act2{
background: yellow;
right: 80px;
}
input{
width: 500px;
height: 50px;
margin-left: 30px;
}
#dbtn{
width: 66px;
height: 166px;
position: fixed;
left: 560px;
justify-content: center;
align-items: flex-start;
}
p{
border: 2px solid black;
height: 50px;
width: 60px;
border-radius: 15%;
line-height: 50px;
text-align: center;
}
.act3{
background-color: gold;
}
</style>
</head>
<body>
<div id="app">
<div class="head1">开始写数据吧</div>
<div id="dbtn">
<p v-for="btn in btns" :class="{act3:btn.title === type?1:0}"
@click="type=btn.title"
>{{btn.title}}</p>
</div>
<input type="text" v-model="msg" @keyup.13 ="addTd" placeholder="输入内容 按键回车创建新的内容">
<ul>
<li v-for="todo in computedTd" :class="{act1:todo.isok}">{{todo.title}}
<button @click="todo.isok = !todo.isok" :class="{act1:todo.isok}">完成</button>
<button @dblclick=" removeTd(id)"
@click="checkTd(todo.id,todo.isok)" class="act2">删除</button>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el:"#app",
data:{
msg:"",
isok:true,
todos:[
{id:1,title:"只是第一条数据",isok:false,},
{id:2,title:"第二条数据开始吧",isok:false,}
],
btns:[
{id:1,title:"A",theme:"primary"},
{id:2,title:"U",theme:"danger"},
{id:3,title:"F",theme:"success"}
],
type:"A"
},
methods:{
removeTd(id){
//使用fliter 过滤器的原则 会将符合的产生新的一组数据
/* this.todos = this.todos.filter(item=>{
if(item.id === id){
return false
}
return true
}) */
//可以简写
/* this.todos = this.todos.filter(item => item.id !== id) */
// 更加简写
this.todos = this.todos.filter (_=>_.id !== id)
},
//删除之前判断是都完成
checkTd(id,isok){
if(isok){
this.removeTd(id)
}else{
if(confirm("确定要删除吗")){
this.removeTd(id)
}
}
},
// 添加
addTd(){
this.todos.push({
id:parseInt(Math.random()*100000),
title:this.msg,
isok:false
})
}
},
//computed 计算属性
computed:{
computedTd(){
switch (this.type) {
case "A":
return this.todos
case "F":
return this.todos.filter(item=>item.isok?true:false)
case "U":
return this.todos.filter(item=>!item.isok?true:false)
}
}
}
})
</script>
</body>
</html>
2877
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
