Vue中TodoList案例_静态

 

MyHeader.vue

<template><div class="todo-header"><input type="text" placeholder="请输入你的任务名称,按回车键确认"></div>
</template><script>
export default {name: "MyHeader"
}
</script><style scoped>
/* header */
.todo-header input{width:560px;height: 28px;font-size: 14px;border: 1px solid #ccc;border-radius: 4px;padding: 4px 7px;
}.todo-header input:focus{outline: none;border-color: rgba(82, 168, 236, 0.8);box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);
}
</style>

MyList.vue

<template><ul class="todo-main"><MyItem/><MyItem/><MyItem/><MyItem/></ul>
</template><script>
import MyItem from "./MyItem";
export default {name: "MyList",components:{MyItem}
}
</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>

MyFooter.vue

<template><div class="todo-footer"><label><input type="checkbox"/></label><span><span>已完成0</span> / 全部2</span><button class="btn btn-danger">清除已完成的任务</button></div>
</template><script>
export default {name: "MyFooter"
}
</script><style scoped>
/* Footer */
.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;margin-right: 5px;
}.todo-footer button{float: right;margin-top: 5px;
}
</style>

MyItem.vue

<template><div><li><label ><input type="checkbox"/><span>xxxx</span></label><button class="btn btn-danger" style="display:none">删除</button></li></div>
</template><script>
export default {name: "MyItem"
}
</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{float: right;display: none;margin-top: 3px;
}li:before{content: initial;
}
li:last-child{border-bottom: none;
}
</style>

App.vue

<template><div id="root"><div class="todo-container"><div class="todo-wrap"><MyHeader/><MyList/><MyFooter/></div></div></div></template><script>
import MyHeader from './components/MyHeader'
import MyList from './components/MyList'
import MyFooter from './components/MyFooter'export default {
name:'App',
components:{MyHeader,MyList,MyFooter},
}
</script><style>
/*base*/
body {background: #fff;
}.btn {display: inline-block;padding: 4px 12px;margin-bottom: 0;font-size: 14px;line-height: 20px;text-align: center;vertical-align: middle;cursor: pointer;box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);border-radius: 4px;
}.btn-danger {color: #fff;background-color: #da4f49;border: 1px solid #bd362f;
}.btn-danger:hover {color: #fff;background-color: #bd362f;
}.btn:focus {outline: none;
}.todo-container {width: 600px;margin: 0 auto;
}
.todo-container .todo-wrap {padding: 10px;border: 1px solid #ddd;border-radius: 5px;
}
</style>

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from "./App";
//关闭Vue的生产提示
Vue.config.productionTip = false
//创建vm
new Vue({el:'#app',render:h=>h(App)
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/7609.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue 中input 点击复制其内容

Element UI中el-input 组件 &#xff0c;一般使用情况&#xff1a; <el-input type"text" id"put" v-model"value" ></el-input> el-input 添加点击事件,这样添加点击事件是无效的&#xff1a; <el-input click"copy&quo…

Linux Shell 脚本编程学习之【第3章 正则表达式 (第一部分)】

第3章 正则表达式 1 正则表达式基础1.1 *符号1.2 “.”符号1.3 “^”符号1.4 “$”符号1.5 “[]”符号1.6 “\”符号1.7 “\<\>”符号1.8 “\{\}”符号 2 正则表达式扩展2.1 “?”符号2.2 “”符号2.3“()”符合和“ | ”符号 3 通配&#xff08;Globbing&#xff09; 1…

生产环境Session解决方案、Session服务器之Redis

目录 一、服务器配置 二、安装nginx 三、安装配置Tomcat&#xff1a; 四、配置session Session服务器之Redis Redis与Memcached的区别 安装部署redis 一、服务器配置 IP地址 主机名 软件包列表 192.168.100.131 huyang1 nginx 192.168.100.133 huyang3 JDK Tomca…

微信小程序上,实现图片右上角数字显示

微信小程序上&#xff0c;实现图片右上角数字显示 直接上代码&#xff1a; 样式代码index.wxss如下&#xff1a; .circle_rednum {position: absolute;color: white;font-size: 13px;background-color: #EC2F43;width: 23px;height: 23px;line-height: 23px;left: 80%;top: …

【docker】docker部署tomcat

目录 1.1 搜索tomcat镜像1.2 拉取tomcat镜像1.3 创建容器&#xff0c;设置端口映射、目录映射1.4 测试 1.1 搜索tomcat镜像 docker search tomcat1.2 拉取tomcat镜像 docker pull tomcat1.3 创建容器&#xff0c;设置端口映射、目录映射 # 在/root目录下创建tomcat目录用于存…

数据库备份还原-mysqldump、mydumper、xtrabackup、压缩

数据库备份&#xff0c;数据库为school&#xff0c;素材如下 一、创建student和score表 CREATE TABLE student ( id INT(10) NOT NULL UNIQUE PRIMARY KEY , name VARCHAR(20) NOT NULL , sex VARCHAR(4) , birth YEAR, department VARCHAR(20) , address VARC…

Linux中常用的指令

ls ls [选项] [目录或文件] 功能&#xff1a;对于目录&#xff0c;列出该目录下所有的子目录和文件&#xff1b;对于文件&#xff0c;列出该文件的文件名和其他属性 常用选项&#xff1a; -a:列出目录下的所有文件&#xff0c;包括以.开头的隐藏文件 -l:列出文件的详细信息。…

单片机第一季:零基础11——实时时钟DS1302

目录 1&#xff0c;DS1302 时钟芯片介绍 2&#xff0c;BCD码介绍 3&#xff0c;涉及到的寄存器 3.1&#xff0c;控制寄存器 3.2&#xff0c;日历/时钟寄存器 3.3&#xff0c;DS1302 的读写时序 4&#xff0c;相关代码 这一章我们来学习DS1302 时钟芯片&#xff0c…

测牛学堂:软件测试之andorid app性能测试面试知识点总结(二)

APP性能测试指标之FPS 如果经常玩游戏的同学应该听过FPS。 FPS本来是图像领域中的概念&#xff0c;是指画面每秒传输的帧数。每秒钟帧数越多&#xff0c;所显示的动作就会越流畅。 但是因为功耗的限制&#xff0c;一般60fps就是跑满的效果了。 我们测试的话&#xff0c;一般…

如何在Windows上恢复已删除的文件?

大多数人在无意中删除了一些重要文件后无法恢复。这些文件被暂时删除&#xff0c;直到我们清空回收站才会消失。你可以通过右键单击回收站中的文件并选择还原选项来轻松恢复这些文件。但是&#xff0c;如果你清理回收站删除了文件怎么办&#xff1f;或者不小心使用Shift Delet…

Pytorch nn.Linear的基本用法与原理详解

1. 参考 Pytorch nn.Linear的基本用法与原理详解_iioSnail的博客-CSDN博客 [机器学习]深度学习初学者大疑问之nn.Linear(a,b)到底代表什么?_五阿哥爱跳舞的博客-CSDN博客

Rola-IP系统崩溃怎么办?亚马逊、沃尔玛、速卖通等测评该如何应对?(详解篇)

近期做测评的卖家遇到了一个大问题&#xff0c;罗拉IP&#xff08;rola-ip&#xff09;的突然关闭&#xff0c;给用户带来了诸多不便&#xff0c;这种跑路行为让用户损失惨重。身为IP提供商&#xff0c;跑路不仅伤害了用户的信任&#xff0c;也影响了用户的项目和工作。 许多用…

观察者模式(java)

目录 结构 案例 代码实现 抽象观察者 抽象主题类 具体观察者 具体主题类 测试类 优缺点 优点 缺点 结构 在观察者模式中有如下角色&#xff1a; Subject&#xff1a;抽象主题&#xff08;抽象被观察者&#xff09;&#xff0c;抽象主题角色把所有观察者对象保存在一个…

Mysql数据库用户操作

# Mysql数据库用户操作 ## 1.1创建用户 shell create user ‘nz’ identified by ‘123456’ # hzm&#xff1a;用户账号&#xff0c;123456&#xff1a;密码 create user ‘nz’’%’ identified by ‘123456’ #所有ip都可用账号 create user ‘nz’’localhost’ identifi…

zabbix通过JMX监控tomcat运行情况

第三阶段基础 时 间&#xff1a;2023年7月20日 参加人&#xff1a;全班人员 内 容&#xff1a; zabbix通过JMX监控tomcat 目录 zabbix通过JMX监控tomcat 一、配置java网关 二、修改zabbix服务端配置文件 三、安装tomcat 四、Zabbix-web端配置 zabbix通过JMX监控tomc…

苹果11手机设置手机跟踪功能

苹果11手机设置手机跟踪功能&#xff0c;就算是手机丢了&#xff0c;也能通过查询手机定位在哪里。 第一步&#xff1a;点击Apple ID进入详情 第二步&#xff1a;点击“查找” 第三步&#xff1a; 第四步&#xff1a; 到了这步&#xff0c;就算是设置成功。 下面需要到官方查询…

初步认识Linux系统编程

Linux是一种自由和开放源代码的操作系统&#xff0c;它以良好的稳定性、强大的安全性和广泛的应用领域而著称。Linux系统编程是指在Linux操作系统下开发应用程序的过程&#xff0c;其中包括与硬件交互、系统调用以及与其他程序进行通信等。 文章目录 学习Linux系统编程前的准备…

04. Idea集成Docker

目录 1、前言 2、开启docker远程 2.1、配置远程访问模式 2.2、重启docker服务 2.3、验证 3、Idea配置Docker 3.1、配置证书登录 4、创建Dockerfile 4.1、编写Dockerfile 4.2、配置启动项 4.3、访问接口 1、前言 上一节中&#xff0c;我们介绍了Dockerfile的方式构建…

Mac电脑必备:3款优质系统软件推荐

对于Mac电脑使用者来说&#xff0c;良好的系统软件是确保计算机高效运行和提升使用者体验的关键。无论是日常办公、娱乐还是创意设计&#xff0c;一系列优质的系统软件都能为使用者带来更顺畅、更便捷的操作体验。在本文中&#xff0c;我们将推荐3款在Mac电脑上必备的优质系统软…