标签：vue item 改查 22% list height 3D% todos
一.先写静态页面，然后把静态页面分组件划分，最后再写效果，效果有增删改查。
二.效果展示：
三.代码展示：
todos.css:
*{
padding: 0;
margin: 0;
}
ul,ol,li{
list-style: none;
}
body{
background-color: #F5F5F5;
}
#app{
width: 550px;
margin: 10px auto;
}
.title{
height: 150px;
line-height: 150px;
color: #EAD7D7;
font-size: 80px;
font-weight: bold;
text-align: center;
width: 100%;
}
.con{
width: 100%;
background-color: #fff;
}
.top{
width: 100%;
position: relative;
display: flex;
background-color: #fff;
align-items: center;
border-bottom: 1px solid #E6E6E6;
}
#inp{
width: 100%;
padding-left: 40px;
box-sizing: border-box;
height: 40px;
outline: none;
border: 0;
margin: 10px 0;
color: #E6E6E6;
font-size: 16px;
}
.select{
position: absolute;
width: 40px;
height: 40px;
margin: 10px 0;
color: #999;
text-align: center;
line-height: 40px;
font-weight: 600;
font-size: 24px;
transform: rotate(90deg);
}
.selbol{
color: #333;
}
.center{
width: 100%;
}
.list li{
width: 100%;
height: 40px;
border-bottom: 1px solid #E6E6E6;
display: flex;
align-items: center;
background-color: #fff;
justify-content: center;
border-bottom: 1px solid #E6E6E6;
}
.choose{
background: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E') no-repeat center;
background-size: 24px 24px;
width: 40px;
height: 40px;
}
.info{
height: 40px;
line-height: 40px;
color: #4d4d4d;
font-size: 16px;
flex: 1;
}
.list .checked .choose{
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
}
.list .checked .info{
text-decoration: line-through;
color: #d9d9d9;
}
.delete{
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
margin-right: 10px;
color: red;
}
.bottom{
width: 100%;
height: 30px;
display: flex;
align-items: center;
}
.count{
width: 80px;
margin-left: 20px;
height: 30px;
line-height: 30px;
color: #999;
}
.tab{
height: 30px;
margin-left: 30px;
display: flex;
align-items: center;
}
.tabBox{
padding:0 5px ;
height: 20px;
line-height: 20px;
color: #999;
margin: 0 5px;
border: 1px solid transparent;
}
.tabSelect{
border-color: #999;
}
.clear{
height: 20px;
line-height: 20px;
margin-left: 50px;
color: #999;
}
组件：
TopVote.vue:
<template>
<div class="top">
<input type="text" placeholder="What needs to be done?" id="inp" :value='value' @input="$emit('input',$event.target.value)" @keyup.enter='$emit("addEvent")'>
<div :class=" {'select':true,'selbol':boo}" @click='$emit("booEvent")'> > </div>
</div>
</template>
<script>
export default {
props:['value','boo']
}
</script>CenterVote.vue:
<template>
<div class="center">
<ul class="list">
<li
v-for="(item, index) in showList"
:class="{ checked: item.finished }"
:key="item.id"
@mouseover="item.show = true"
@mouseout="item.show = false"
>
<div class="choose" @click="$parent.one(item)"></div>
<div class="info">{{ item.value }}</div>
<div class="delete" v-show="item.show" @click="$parent.delet(index)">X</div>
</li>
</ul>
</div>
</template>
<script>
export default {
props:['showList']
}
</script>BottomVote.vue:
<template>
<div class="bottom">
<div class="count">
<span class="num">{{ $parent.numbe }}</span> item left
</div>
<div class="tab">
<div
:class="{ tabBox: true, tabSelect: $parent.active == 'all' }"
@click="$parent.active = 'all'"
>
All
</div>
<div
:class="{ tabBox: true, tabSelect: $parent.active == 'no' }"
@click="$parent.active = 'no'"
>
Active
</div>
<div
:class="{ tabBox: true, tabSelect: $parent.active == 'yes' }"
@click="$parent.active = 'yes'"
>
Completed
</div>
</div>
<div class="clear" v-show="$parent.ssBoo" @click="$parent.clearAll">
Clear completed
</div>
</div>
</template>
<script>
export default ({
props:[]
})
</script>
Todos.vue:
<template>
<div>
<div class="title">TODOS</div>
<div class="con">
<TopVote :value="val" @input="change" @addEvent="add" @booEvent='booFn' :boo='boo'/>
<CenterVote :showList='showList'/>
<BottomVote :active='active'/>
</div>
</div>
</template>
<script>
import Vue from "vue";
import TopVote from "./TopVote.vue";
import CenterVote from "./CenterVote.vue";
import BottomVote from "./BottomVote.vue";
export default {
components: {
TopVote,
CenterVote,
BottomVote
},
data() {
return {
list: JSON.parse(localStorage.getItem("list")) || [],
showList: [],
// boo:false,
val: "",
active: "all",
// ssBoo:false
};
},
methods: {
add() {
//添加数据
if (this.val.trim() != "") {
this.list.push({
id: new Date().getTime(),
value: this.val,
finished: false,
show: false,
});
this.val = "";
}
},
change(value) {
this.val = value;
},
delet(index) {
//删除单个
this.list.splice(index, 1);
},
booFn(){
this.boo=!this.boo;
},
// all(){ //全选/反选
// this.boo=!this.boo;
// for(let item in this.list){
// this.list[item].finished=this.boo;
// }
// },
one(item) {
item.finished = !item.finished;
// let bol=true;
// for(let i in this.list){
// if(!this.list[i].finished){
// bol=false;
// break;
// }
// }
// this.boo=bol;
},
clearAll() {
this.list = this.list.filter((item) => {
return !item.finished;
});
},
},
watch: {
list: {
handler(value) {
if (this.active == "all") {
this.showList = value;
} else if (this.active == "no") {
this.showList = value.filter((item) => !item.finished);
} else {
this.showList = value.filter((item) => item.finished);
}
localStorage.setItem("list", JSON.stringify(value));
},
deep: true,
immediate: true,
},
active(value) {
if (value == "all") {
this.showList = this.list;
} else if (value == "no") {
this.showList = this.list.filter((item) => !item.finished);
} else {
this.showList = this.list.filter((item) => item.finished);
}
},
},
computed: {
numbe: {
//计算未完成数值
get() {
let num = 0;
this.list.map((item) => {
if (!item.finished) {
num++;
}
});
return num;
},
},
boo: {
//计算全选/反选
get() {
let bol = true;
for (let i in this.list) {
if (!this.list[i].finished) {
bol = false;
break;
}
}
return bol;
},
set(value) {
for (let item in this.list) {
this.list[item].finished = value;
}
},
},
ssBoo: {
//批量删除是否隐藏
get() {
let shows = this.list.some((item) => {
return item.finished;
});
return shows;
},
},
},
};
</script>
App.vue:
<template>
<div id="app">
<todos />
</div>
</template>
<script>
import Todos from "./components/Todos.vue";
export default {
name: "App",
components: {
Todos,
},
};
</script>
<style lang="scss">
@import url("assets/todos.css");
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
#app {
// font-size: 40px;
text-align: center;
color: #2c3e50;
}
</style>
main.js:
// 引入vue
// import Vue from 'vue/dist/vue'
import Vue from 'vue'
// 引入App组件 是所有组件的父组件
import App from './App.vue'
// import "./assets/demo"
import "bootstrap/dist/css/bootstrap.css"
// 关闭vue的生产提示
Vue.config.productionTip = false
// 创建vue实例
new Vue({
render: h => h(App),
// render(createElement){
// return createElement('h1','标题')
// }
// template:'<h2>标题</h2>'
}).$mount('#app')
本篇文章主要讲述了用vue实现todos效果，有代码展示，欢迎观看！！！
标签：vue,item,改查,22%,list,height,3D%,todos 来源： https://blog.csdn.net/m0_62201566/article/details/120612599
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。