标签：vue title todo 1px 例子 import border todos
要求：实现基本的增删查改
第一步：新建一个项目
成功创建的样子：
项目目录如图所示：
运行效果如下所示：(该有的功能都实现了，视频暂时传不上来
footer代码：
<template>
<div class="todo-footer">
<label>
<input type="checkbox" v-model="isCheck"/>
</label>
<span>
<span>已完成{{finishedCount}}件</span> / 总计{{todos.length}}件
</span>
<button class="btn btn-warning" @click="delFinishedTodos">清除已完成任务</button>
</div>
</template>
<script>
export default{
name:"Footer",
props:{
todos:Array,
selectedAll:Function,
delFinishedTodos:Function
},
computed:{
finishedCount(){
return this.todos.reduce((total,todo)=>total + (todo.finished ? 1 : 0),0)
},
isCheck:{
get(){
return this.finishedCount === this.todos.length && this.todos.length > 0
},
set(value){
this.selectedAll(value)
}
}
}
}
</script>
<style scoped>
/*尾部*/
.todo-footer {
height: 40px;
line-height: 40px;
padding-left: 6px;
margin-top: 5px;
}
.todo-footer label {
display: inline-block;
margin-right: 20px;
cursor: pointer;
}
.todo-footer label input {
position: relative;
top: -1px;
vertical-align: middle;
}
.todo-footer button {
float: right;
margin-top: 5px;
}
</style>
header代码：
<template>
<div class="todo-header">
<input
type="text"
placeholder="请输入今天的任务清单，按回车键确认"
v-model="title"
@keyup.enter="addItem"
/>
</div>
</template>
<script>
export default{
name:"Header",
props:{
addTodo:Function
},
data(){
return{
title:''
}
},
methods:{
addItem(){
//1,1判断是否合理
const title = this.title.trim();
if(!title){
alert('输入内容不能为空');
return;
}
//1,2生成一个todo对象
const todo = {title,finished:false};
//1.3调用方法
this.addTodo(todo);
//1.4清空输入框
this.title = ''
}
}
}
</script>
<style scoped>
/*头部*/
.todo-header input{
width: 560px;
height: 28px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
padding: 4px 7px;
outline: none;
}
.todo-header input:focus{
outline: none;
border-color: rgba(255,0,0,0.8);
box-shadow: inset 0 1px 1px rgba(255, 0, 0, 0.075),0 0 8px rgba(255, 0, 0, 0.6);
}
</style>
Item代码：
<template>
<li
@mouseenter="dealShow(true)"
@mouseleave="dealShow(false)"
:style="{background:bgColor}"
>
<label>
<input type="checkbox" v-model="todo.finished"/>
<span>{{todo.title}}</span>
</label>
<button v-show="isShowDelButton" @click="delItem">删除</button>
</li>
</template>
<script>
export default{
name:"Item",
props:{
todo:Object,
index:Number,
delTodo:Function
},
data(){
return {
bgColor:'#fff',
isShowDelButton:false
}
},
methods:{
dealShow(flag){
this.bgColor = flag ? '#ddd' : '#fff';
this.isShowDelButton = flag;
},
delItem(){
if(window.confirm(`确定删除${this.todo.title}吗？`)){
this.delTodo(this.index)
}
}
}
}
</script>
<style scoped>
/*列表选项*/
li {
list-style: none;
height: 36px;
line-height: 36px;
padding: 0 5px;
border-bottom: 1px solid #ddd;
}
li label {
float: left;
cursor: pointer;
}
li label li input {
vertical-align: middle;
margin-right: 6px;
position: relative;
top: -1px;
}
li button {
background-color: orangered;
padding: 4px 10px;
border-radius: 5px;
color: #fff;
border: none;
float: right;
margin-top: 3px;
outline: none;
cursor: pointer;
}
li:before {
content: initial;
}
li:last-child {
border-bottom: none;
}
</style>
List代码：
<template>
<ul class="todo-main">
<Item
v-for="(todo,index) in todos"
:key="index"
:index="index"
:todo="todo"
:delTodo="delTodo"
/>
</ul>
</template>
<script>
//1,引入
import Item from './Item'
export default{
name: "List",
props:{
todos:Array,
delTodo:Function
},
components:{
Item
}
}
</script>
<style scoped>
/*列表*/
.todo-main {
margin-left: 0px;
border: 1px solid #ddd;
border-radius: 2px;
padding: 0px;
}
.todo-empty {
height: 40px;
line-height: 40px;
border: 1px solid #ddd;
border-radius: 2px;
padding-left: 5px;
margin-top: 10px;
}
</style>
App.vue代码：
<template>
<div id="app">
<div class="todo-container">
<div class="todo-wrap">
<Header :addTodo="addTodo"/>
<List :todos="todos" :delTodo="delTodo"/>
<Footer :todos="todos" :selectedAll = "selectedAll" :delFinishedTodos="delFinishedTodos"/>
</div>
</div>
</div>
</template>
<script>
//1,引入
import Header from './components/Header'
import Footer from './components/Footer'
import List from './components/List'
export default{
name: "App",
data(){
return{
todos:[
{title:'学爵士', finished:false},
{title:'发SCI', finished:false},
{title:'蓝桥杯', finished:true},
]
}
},
//2,映射
components:{
Header,
Footer,
List
},
methods:{
//插入一条记录
addTodo(todo){
this.todos.unshift(todo);
},
//删除一条记录
delTodo(index){
// debugger;
this.todos.splice(index,1);
},
//选中所有计划
selectedAll(isCheck){
this.todos.forEach(todo=>{
todo.finished = isCheck
})
},
delFinishedTodos(){
this.todos = this.todos.filter(todo => !todo.finished)
}
}
}
</script>
<style scoped>
/*主面板*/
.todo-container {
width: 600px;
margin: 0 auto;
}
.todo-container .todo-wrap {
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
</style>
main.js代码：
// // The Vue build version to load with the `import` command
// // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
// import Vue from 'vue'
// import App from './App'
// Vue.config.productionTip = false
// /* eslint-disable no-new */
// new Vue({
// el: '#app',
// components: { App },
// template: '<App/>'
// })
import Vue from 'vue'
import App from './App'
import './assets/css/base.css'
new Vue({
el:'#app',
components:{
App
},
template:'<App/>'
});标签：vue,title,todo,1px,例子,import,border,todos 来源： https://blog.csdn.net/Annaluo/article/details/122800834
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。