前端学习(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>
运行结果
前端学习(1732):前端系列javascript之插入内容相关推荐
- 2021年最新版Web前端学习路线图-前端小白入门必读-推荐
2021年最新版Web前端学习路线图-前端小白入门必读-推荐 Hello,大家好,相信很多学习前端的小伙伴,会有很多的疑惑: 我要学习那些技术? 我要到哪里去学习这些技术呢? 学习这些技术的目的对就业 ...
- web前端学习之前端重构方案,来了解一下
前端技术发展很快,很多项目面临前端部分重构,很开心可以让我进行这次项目前端的重构方案编写,在思考的同时参考了网上很多资料,希望本篇重构方案有一定的完整性,可以带给大家一些在面临重构时有用的东西,同时希 ...
- Web前端学习-第三课JavaScript篇
Q5:解释什么是引用类型?在使用引用类型的时候需要注意什么? 引用类型通常叫做类,也就是说,遇到引用值时,所处理的就是对象,就是公用. 类型: object类型,应用于应用程序中存储和数据传输(创建 ...
- 【融职培训】Web前端学习 第3章 JavaScript基础教程9 内置对象
一.内置对象概述 javascript为我们提供了很多内置对象,这些内置对象为我们提供了很多语言的基本功能.我们之前学过的数组就是JavaScript的内置对象,除了数组我们还应该了解的内置对象有:M ...
- 【Web前端学习之路】JavaScript入门 (黑马课程学习笔记)
1.编程语言和标记语言的区别 编程语言有很强的逻辑和行为能力,通常是主动的指令,如:if.while等. 标记语言不用于向计算机发出指令,常用于格式化和链接,通常是被读取的. 2.JavaScript ...
- Java前端学习(一)JavaScript脚本语言基础
JavaScript脚本语言基础 前言 一.JavaScript简介 1.应用 2.特点 3.示例 4.补充 二.语法基础 1.数据类型 2.表达式和运算符 3.流程控制语句 4.函数 三.对话框 1 ...
- 【融职培训】Web前端学习 第3章 JavaScript基础教程18 BOM概述
一.概述 <javaScript高级程序设计>这本书讲过: javaScript = ECMAScript + DOM + BOM. DOM:文档对象模型(document对象) BOM: ...
- 【前端学习】前端学习第十三天:JavaScript中DOM技术介绍
DOM即文档对象模型,是一种与浏览器.编程平台和语言无关的应用程序接口,它提供了动态访问和更新文档的内容.结构和样式的基本方法. 下面是网页文档对象对应的节点树: DOM中节点具有不同的类型,常见的节 ...
- 【前端学习】前端学习第十五天:JavaScript中的事件模型
在各种浏览器中存在三种事件模型:原始事件模型.DOM事件模型和IE事件模型: 一.原始事件模型: 原始事件模型被所有浏览器支持: 在原始事件模型中.事件一旦发生就直接调用事件处理函数,事件不会向别的对 ...
最新文章
- 保存ip地址和计算机名称,批量设置IP地址和计算机名
- 三人表决器逻辑表达式与非_机器学习 | 关于参数模型与非参数模型研究
- mustache.js html模板,js模板引擎Mustache将h5模板页面转化为小程序页面
- HDU2098 分拆素数和【筛选法】
- Android - 开发者应该深入学习的10个开源应用项目
- 纳韦斯托克斯方程的推导_这5个改变世界的方程,跟你想的不一样!
- Matlab之四阶龙格—库塔法方法:解常微分初值问题
- Android保存照片到相册
- 基于pytorch的GAN网络搭建
- 清华姚班毕业的斯坦福博士陈丹琦入选Google AI2021研究学者计划
- 高性能内存分配器 jemalloc 基本原理
- 华硕固件默认ip,不能进入路由的管理后台了?千万别慌张
- 在Android运行cocos Demo游戏
- java怎样生成epub文件_使用Zip库创建Epub文件
- 这些数据爬虫网站,帮你工作提质增效,还不收藏?
- 仿小米商城官网首页模板(HTML+CSS)
- C\C++中计时、延时函数
- 取出汉字的拼音首字母
- 问答网站Quora副总裁杨蕾博士:让知识改变世界
- 【趣学算法】第二章 算法之美(下)
热门文章
- python编写脚本,删除固定用户下的所有表
- 【转】提高PHP性能的53个技巧
- 宏定义#define
- 5年后你最想要什么?
- 读取xml文件转成ListT对象的两种方法(附源码)
- 开始时间小于 结束时间 js_DNF分享红包开始及结束时间 红包有什么奖励相关介绍...
- .dll文件存在但是不显示_一招巧妙解决U盘内文件明明存在,打开U盘而内容却不显示的问题...
- springboot md5加密_实在!基于Springboot和WebScoket,写了一个在线聊天小程序
- 1、如何进行字符串常量中的字符定位_Java String:字符串常量池,我相信会有很多朋友不很理解这部分...
- vs2008打开vs2010工程项目