前端学习(1732):前端系列javascript之插入内容

index.vue

<template><view class="content"><view v-if="list.length!==0" class="todo-header"><view class="todo-header_left"><text class="active-text">全部</text><text>10条</text></view><view class="todo-header_right"><view class="todo-header_right_item active_tab">全部</view><view class="todo-header_right_item">待办</view><view class="todo-header_right_item">已完成</view></view></view><view v-if="list.length===0"><view class="image-default"><image src="../../static/default.png" mode="aspectFit"></image></view><view class="default-info"><view>你还没有创建任何代办事项</view><view>点击下列+号创建一个吧</view></view></view><view v-else class="todo-content"><view class="todo-list todo_finish" v-for="(item,index) in list" :key="index"><view class="todo-list_checkbox"><view class="checkbox"></view></view><view class="todo-list_content">{{item.content}}</view></view></view><!-- 创建按钮 --><view class="create_todo" @click="create"><text class="iconfont icon-jia"></text></view><!-- 输入按钮 --><view v-if="active" class="create-content"><view class="create-content-box"><view class="create-input"><input type="text" v-model="value" placeholder="请输入您要创建的todo"/></view><view class="create_button" @click="add">创建</view></view></view></view>
</template><script>export default {data() {return {value:'',list:[],active:false}},onLoad() {},methods: {//打开输入框create(){this.active=true;},add(){console.log(this.value);this.list.push({content:this.value})}}}
</script><style>@import '../../common/icon.css';
.todo-header{display: flex;align-items: center;padding: 0 15px;font-size: 12px;height: 45px;box-shadow: -1px 1px 5px 0 rgba(0,0,0,0.1) ;background: #FFFFFF;
}
.todo-header_left{width: 100%;
}
.active-text{font-size: 14px;color: #279def;padding-right: 10px;
}
.todo-header_right{flex-shrink: 0;display: flex;
}
.todo-header_right_item{padding: 0 5px;
}
.active_tab{color: #279def;
}
.todo-content{position: relative;
}
.todo-list{position: relative;display: flex;align-items: center;padding: 15px;margin: 15px;color: #0c3854;font-size: 14px;border-radius: 10px;background: #cfebfd;box-shadow: -1px 1px 5px 0 rgba(0,0,0,0.1) ,-1px 2px 1px 0 rgba(255,255,255) inset;overflow: hidden;
}
.todo-list:after{position: absolute;content: '';top:0;left: 0;bottom:0;width: 5px;background: #91d1e8;
}
.todo-list_checkbox{padding-right: 15px;
}
.checkbox{width: 20px;height: 20px;border-radius: 50%;background: #FFFFFF;box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);}
.todo_finish .checkbox{position: relative;background: #eee;
}
.todo_finish .checkbox:after{content: '';position: absolute;width: 10px;height: 10px;top: 0;left: 0;right: 0;bottom: 0;margin: auto;border-radius: 50%;background: #CFEBFD;box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.2) inset;
}
.todo_finish .todo-list_content {color: #999999;
}.todo_finish.todo-list:before{content: '';position: absolute;top: 0;bottom: 0;left: 40px;right: 10px;height: 2px;margin: auto 0;background: #bdcdd8;}.todo_finish .todo-list_content:after{background: #cccccc;}.create_todo{display: flex;justify-content: center;align-items: center;position: fixed;bottom: 20px;left: 0;right: 0;margin: 0 auto;width: 50px;height: 50px;border-radius: 50%;background-color: #deeff5;box-shadow: -1px 1px 5px 2px rgba(0, 0, 0, 0.1), -1px 1px 1px 0 rgba(255, 255, 255) inset;}.icon-jia {font-size: 30px;color: #add8e6;}.create-content{position: fixed;bottom: 95px;left: 20px;right: 20px;}.create-content-box{display: flex;align-items: center; padding:0 15px;padding-right: 0;border-radius: 50px;background: #DEEFF5;ox-shadow: -1px 1px 5px 2px rgba(0, 0, 0, 0.1);}.create-input{/* width: 100%;padding-right: 15px; */width: 100%;padding-right: 15px;color: #add8e6;}.create_button{display: flex;justify-content: center;align-items: center;flex-shrink: 0;width: 80px;height: 50px;border-radius: 50px;font-size: 16px;color: #88d4ec;box-shadow: -2px 0px 2px 1px rgba(0, 0, 0, 0.1);}.create-content:after{content: '';position: absolute;right: 0;left: 0;bottom: -8px;margin: 0 auto;width: 20px;height: 20px;background: #DEEFF5;transform: rotate(45deg);box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.1);z-index: -1;}.create-content-box::after{content: '';position: absolute;right: 0;left: 0;bottom: -8px;margin: 0 auto;width: 20px;height: 20px;background: #DEEFF5;transform: rotate(45deg);}.image-default {display: flex;justify-content: center;}.image-default image {width: 100%;}.default-info {text-align: center;font-size: 14px;color: #CCCCCC;}</style>

运行结果

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

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

相关文章

你会通过Docker部署war包吗

1、 使用Docker部署war&#xff0c;必须要用容器&#xff0c;我们就用tomcact容器&#xff0c;其实都是将war包丢到tomcat的webapps目录下&#xff0c;tomcat启动的情况下会自动解压war包。 一种是在Docker中安装tomcat容器的镜像&#xff0c;然后把war包丢到tomcat镜像下weba…

Yii中使用的简单方法

1. $this->render: 输出父模版的内容&#xff0c;将渲染的内容嵌入父模版。 2. $this->renderPartial: 不输出父模版的内容&#xff0c;只对本次渲染的布局内容进行输出。 3. PDostatement::bindValue: 把一个值绑定到一个参数。 PDostatement::bindParam: 绑定一个参数到…

前端学习(1732):前端系列javascript之状态切换

index.vue <template><view class"content"><view v-if"list.length!0" class"todo-header"><view class"todo-header_left"><text class"active-text">全部</text><text>10条&…

记一次若依ruoyi-ui(Vue2) 关闭tab页并打开新页面

网上教程很多&#xff0c;但是都是给前端代码段&#xff0c;都不知道怎么使用&#xff08;本人菜鸟一个&#xff09;&#xff0c;今天记一次完整的&#xff1a; 在你需要关闭的tab页面&#xff0c;加入以下代码&#xff1a; handleCommit()是我需要关闭页面的方法&#xff0c…

log4j自定义配置文件(SpringMVC项目)

问题来源 本周在实际项目中发现无法自定义的log4j-dev配置的error日志级别文件无法生效&#xff0c;项目启动后仍然采用默认的info级别日志进行打印。之所以自定义名称&#xff0c;是为了减少隔离不同环境的日志级别&#xff0c;比如开发dev环境使用debug、info级别&#xff0…

Redis的Java客户端Jedis的八种调用方式(事务、管道、分布式)介绍

一、普通同步方式二、事务方式(Transactions)三、管道(Pipelining)四、管道中调用事务五、分布式直连同步调用六、分布式直连异步调用七、分布式连接池同步调用八、分布式连接池异步调用九、需要注意的地方十、测试十一、完整的测试代码jedis是一个著名的key-value存储系统&…

23 | 二叉树基础(上):什么样的二叉树适合用数组来存储?

思考题 二叉树有哪几种存储方式&#xff1f;什么样的二叉树适合用数组来存储&#xff1f; 树&#xff08;Tree&#xff09; 根节点&#xff1a;没有父节点的节点叶子节点或者叶节点&#xff1a;没有子节点的节点叫做 树的高度、深度、层&#xff1a; 举例说明&#xff1a; 生…

HBase 手动 flush 机制梳理

对应 HBase 版本0.94.1&#xff0c;对照了开源的版本和工作使用的某发行版 问题&#xff1a;在 HBase shell 里面输入 flush table_or_region_name之后&#xff0c;发生了什么&#xff1f;具体的实现是怎么样的&#xff1f;对于现有的某个表&#xff0c;我如何在做操作之前估算…

寻找字符串中第一个仅仅出现一次打字符

寻找字符串中第一个仅仅出现一次打字符 代码例如以下&#xff1a; #include <iostream> #include <string>using namespace std;char findfirstoncechar(string &str) {int arr[255] {0};int i;for (i 0; i<str.size();i){arr[str[i]];}for(i 0; i < …

从0到1搞一波dubbo

1、为什么需要dubbo&#xff1f;&#xff08;为了解决什么问题&#xff1f;&#xff09; 架构演变 1 单一应用架构 2 应用和数据库单独部署 3 应用和数据库集群部署 4 数据库压力变大&#xff0c;读写分离 5 使用缓存技术加快速度 6 数据库分库分表 7 应用分为不同的类型拆分 …

前端学习(1734):前端系列javascript之添加动画

<template><view class"content"><!-- 状态栏 --><view v-if"list.length ! 0" class"todo-header"><!-- 状态栏的左侧 --><view class"todo-header__left"><text class"active-text&quo…

android146 360 病毒查杀

<?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android:orientatio…

24 | 二叉树基础(下):有了如此高效的散列表,为什么还需要二叉树?

这节学习一种特殊的二叉树—二叉查找树。它最大的特点是支持动态数据集合的快速插入、删除、查找操作。但是散列表也是支持这些操作的&#xff0c;并且散列表的这些操作比二叉查找树更高效&#xff0c;时间复杂度是 O(1)。 问题引入 既然有高效的散列表&#xff0c;二叉树的地…

【可持久化线段树】【主席树】[HDU4417]Super Mario

Mario is world-famous plumber. His “burly” figure and amazing jumping ability reminded in our memory. Now the poor princess is in trouble again and Mario needs to save his lover. We regard the road to the boss’s castle as a line (the length is n), on ev…

25 | 红黑树(上):为什么工程中都用红黑树这种二叉树?

问题引入 二叉查找树在频繁的动态更新过程中&#xff0c;可能会出现树的高度远大于 log2n 的情况&#xff0c;从而导致各个操作的效率下降。极端情况下&#xff0c;二叉树会退化为链表&#xff0c;时间复杂度会退化到 O(n)。要解决这个复杂度退化的问题&#xff0c;需要设计一…

PHP扩展开发(3)-config.m4

1. 宏命令1.1. dnl 注释 1.2. 扩展的工作方式1.2.1) PHP_ARG_WITH不需要第三方库1.2.2) PHP_ARG_ENABLE依赖第三方库1.3. PHP_REQUIRE_CXX 用于指定这个扩展用到C1.4. PHP_ADD_INCLUDE 指定扩展用到的头文件目录1.5. PHP_CHECK_LIBRARY 指定扩展的PHP_ADD_LIBRARY_WITH_PATH定义…