20190614笔记（颜色透明度,css,filter,滤镜,计算属性,json和formData转换）

今天忙里偷闲,把最近做的笔记做一下整理. 1.json和formData互相转换适用场景:对接后台接口.后台接口写的因人而异,不同的人有不同的风格.比如,文件上传,原本就是formData格式,有人偏要写json格式的接口:对象处理,直接用json多方便,有人就偏喜欢用formData.懒得扯皮,自己转拉倒. 代码: // json转formData const formData = new FormData(); Object.keys(params).forEach((key) => {…

Vue学习笔记（二）动态绑定、计算属性和事件监听

目录一.为属性绑定变量 1. v-bind的基本使用 2. v-bind动态绑定class(对象语法) 3. v-bind动态绑定class(数组语法) 4. v-bind动态绑定style(对象语法) 5. v-bind动态绑定style(数组语法) 二.计算属性 1. 基本使用 2. 计算属性的setter和getter 3. 计算属性和method对比三.事件监听 1. v-on的参数问题 2. v-on修饰符 click的.stop修饰符 click的.prevent修饰符 clic…

《从零开始学Swift》学习笔记（Day 50）——扩展计算属性、方法

原创文章,欢迎转载.转载请注明:关东升的博客可以在原始类型上扩展计算属性,包括实例计算属性和静态计算属性.添加计算属性的定义,与普通的计算属性的定义是一样的. 实例计算属性示例:在网络编程时,为了减少流量,从服务器端返回的不是信息描述,而是编码,然后在本地再将编码转换为描述信息.为此定义了如下Int类型扩展: extension Int { //定义Int类型的扩展 var errorMessage : String { //只读计算属性 var errorStr = "" swit…

CSS filter滤镜试玩

1.模糊(blur). 用法:给相应元素设置高斯模糊,传入的px数值越大越模糊. 2.亮度(brightness). 用法:给元素设置亮度,0%为全黑,100%为元素原始亮度,>100%表示会比元素原始亮度更亮. 3.饱和度(saturate) 用法:设置元素的颜色饱和度,0%为无色,100%为原始饱和度,>100%为高饱和度. 5.阴影效果(drop-shadow) 给元素的图像添加阴影效果.注意:这跟box-shadow是有明显不同的,虽然传入的参数还是老四样:横向偏移量.纵向偏移量.模糊…

Knockout开发中文API系列3–使用计算属性

计算属性如果你已经有了一个监控属性 firstName和lastName,如果你想显示全名该怎么做呢?这个时候你就可以通过计算属性来实现,这个方法依赖于一个或多个监控属性,如果任何依赖对象发生改变他们就会跟着改变. 例如,下面的 view model: function AppViewModel() { this.firstName = ko.observable('Bob'); this.lastName = ko.observable('Smith'); } 你可以添加一个计算属性来返回全…

CSS中filter滤镜学习笔记

1．CSS静态滤镜样式 (filter)(只有IE4.0以上支持) CSS静态滤镜样式的使用方法:{ filter : filtername( parameters1, parameters2, ...) } Filter样式简要说明支持参数 alpha 设置图片或文字的不透明度 opacity.finishOpacity.style.startX.startY.finishX.finishY.add.direction.strength blur 在指定的方向和位置上产生动感模糊效果 a…

CSS中filter滤镜的学习笔记

【转载】CSS filter:hue-rotate色调旋转滤镜实现按钮批量生产

文章转载自张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/ 原文链接:https://www.zhangxinxu.com/wordpress/2018/11/css-filter-hue-rotate-button/ 原文摘要: 传统按钮都是通过具体色值进行赋色的.有如下缺点: 每种按钮还有不同的:hover和:active颜色需要额外设置,按钮CSS代码量较多,出现颜色也很多: 如果出现新的状态按钮,例如今年流行紫色,需要一个紫色按钮.开发同学需要求助于设计师,…

Android 之计算控件颜色透明度

Android 之计算控件颜色透明度 1.UI会给一个数值,例如:#EFE000,透明度30% 2.用255乘以30%等于76.5,然后四舍五入等于77 3.用计算器将十进制的77转成十六进制的数据为4D 4.所以结果就是#4DEFE000…

兼容性背景颜色半透明CSS代码（不影响内部子元素）

如何简单兼容性的实现父元素是半透明背景色,而子元素不受影响. 兼容所有浏览器的背景颜色半透明CSS代码: background-color: rgba(, , , .); filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#,endColorStr=#); 注意:startColorStr 和 endColorStr 的值,前两位是十六进制的透明度,后面六位是十六进制的颜色. 其格式为 #AARRGGBB . AA…

filter滤镜的使用

刚开始学css,开始遇到filter不懂什么意思后来到网上查了,觉得解释的很全面,就把它抠下来,以便自己经常来看看. CSS滤镜的使用方法:filter:filtername(parameters) 即 filter:滤镜名称(参数) alpha:设置透明层次blur:创建高速度移动效果,即模糊效果chroma:制作专用颜色透明DropShadow:创建对象的固定影子FlipH:创建水平镜像图片FlipV:创建垂直镜像图片glow:加光辉在附近对象的边外gray:把图片灰度化invert:反色l…

CSS filter 有哪些神奇用途

背景基本概念 CSS filter 属性将模糊或颜色偏移等图形效果应用于元素形成滤镜,滤镜通常用于调整图像,背景和边框的渲染.它的值可以为 filter 函数 <filter-function> 或使用 url 添加的svg滤镜. filter: <filter-function> [<filter-function>]* | none filter: url(file.svg#filter-element-id) <filter-function> 可以…

巧用 CSS3 filter(滤镜) 属性

原文链接:CSS3 filter(滤镜) 属性效果预览 filter: grayscale(100%); 定义和使用 filter 属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度). 默认值 none 继承 no 动画支持是.详细可查阅 CSS 动画版本 CSS3 浏览器支持表格中的数字表示支持该方法的第一个浏览器的版本号. 紧跟在数字后面的 -webkit- 为指定浏览器的前缀. 属性 filter 18.0 -webkit- 不支持 35.0 6.0 -webki…

改变父元素的透明度，不影响子元素的透明度—css

1.如果我们给父元素添加opacity:0.4后,子元素的red颜色也变成了0.4的透明度, 例子如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>透明度写法</title> <style type="text/css"> *{ margin:0; padding:0; } .wrap{ margin:20…

CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)

CSS3基础——笔记 CSS是Cascading Style Sheet的缩写,翻译为"层叠样式表" 或 "级联样式表".CSS定义如何显示HTML的标签央视,用于设计网页的外观效果.通过使用CSS实现页面的内容与表现形式分离,极大提高了工作效率. 一.CSS基础用法 CSS代码可以在任何文本编辑器中打开和编辑.因此,不管读者有没有变成基础,初次接触CSS时会感到很简单. 1.1 CSS样式样式是CSS最小的语法单元,每个样式包含两部分内容:选择器和声明(规则),…

简单说通过CSS的滤镜实现火焰效果

说明上次我们了解了一些css滤镜的基础知识, 简单说 CSS滤镜 filter属性这次我们就来用css的滤镜实现一个火焰的效果. 解释要实现上面的火焰效果,我们先来了解一些必要的东西. 上次我们说过两个滤镜,blur 和 contrast. blur 是给图像设置高斯模糊, contrast 是调整图像的对比度, 他们一起使用会产生融合的效果. 效果图图中红色背景设置了 filter:contrast(20); 这点很重要,两个圆设置了 filter:blur(10px); 如果还…

增加字体和颜色样式-------CSS

通过使用CSS,控制文本的字体,风格和颜色 1.基本操作: body{ font-family: Verdana, Geneva, Tahoma, sans-serif } body{ font-size: 14px } body{ color: silver } body{ font-weight: bold } body{ text-decoration: underline } 注释: font-family:定制页面中使用的字体 font-size:控制字体大小 color:为文本设置颜…

css filter详解

css filter详解 filter 属性详解属性名称类型说明 grayscale 灰度值为数值取值范围从0到1的小数(包括0和1) sepia 褐色值为数值取值范围从0到1的小数(包括0和1) saturate 饱和度值为数值默认是1,可以是小于1的小数,也可以大于1 hue-rotate 色相旋转值为角度 0-360deg invert 反色值为数值取值范围从0到1的小数(包括0和1) /*IE10*/ opacity 透明度值为数值取值范围从0到1的小数(包…

css3中强大的filter(滤镜)属性

CSS3中强大的filter(滤镜)属性博主最近在做网站的过程中发现了一个非常强大的CSS3属性,就是filter(滤镜)属性,喜欢p图的朋友看名字都应该知道这是什么神器了吧.当然,这个属性的效果肯定不能跟ps相比,但是利用的好的话可以在节约很多空间下,把一张图做成两张图的效果. 1定义 filter,从字面意思来看就是滤镜,官方定义filter属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度):举个栗子: <style> img{ /*灰度100%*/ -web…

前端笔记之Vue（二）组件&案例&props&计算属性

一.Vue组件(.vue文件) 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素. 所有的 Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子. 说白了,就是HTML.CSS.JS行为的一个封装. Vue中组件的实例化…

前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前端群里还发现以上观点类似的奇葩聊天,真是*** 其实,也是在很久以前,看了腾讯ISUX的一位前端工程师-麦时分享的一篇技术文章(个人站点已失效,就不贴出来了),才了解到真正的css选择器权重计算. 以下是css选择器权重计算精华所在,翻译自国外的文档(记得是W3C给出的计算规则) 如果一个声明来自s…

Solr In Action 笔记(2) 之评分机制(相似性计算)

Solr In Action 笔记(2) 之评分机制(相似性计算) 1 简述我们对搜索引擎进行查询时候,很少会有人进行翻页操作.这就要求我们对索引的内容提取具有高度的匹配性,这就搜索引擎文档的相似性计算,如何准确的选出最符合查询条件的文档. <这就是搜索引擎>里面对相似性计算进行了简单的介绍. 内容的相似性计算由搜索引擎的检索模型建模,它是搜索引擎的理论基础,为量化相关性提供了一种数学模型,否则没法计算.当然检索模型理论研究存在理想化的隐含假设,即假设用户需求已经通过查询非常清晰明确地表达出…

笔记《精通css》第5章链接应用样式

第5章链接应用样式 1.链接伪类选择器 a : link{ } (寻找没有被访问过的链接) a : visied{ }(寻找被访问过的链接) 动态伪类选择器 a : hover{ }(寻找鼠标悬停处的链接) a : focus{ }(寻找通过键盘移动到的链接) a : active{ }(寻找被激活的链接) 选择器的次序,次序混乱样式将不起作用 a : hover{ } a : focus{ } a : active{ } a : li…

纯CSS实现自动轮播，CSS变量的定义与使用，计算属性的使用

先来看一下实现的效果: 实现原理: HTML中使用ul>li存放图片 CSS使用CSS3的animation来完成动画  <section class="slider-container"> <ul class="slider"> <li class="slider-item slider-item1">item1</li> <li class=&q…

Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第十三章：计算着色器（The Compute Shader）

原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第十三章:计算着色器(The Compute Shader) 代码工程地址: https://github.com/jiabaodan/Direct12BookReadingNotes GPU已经被优化为处理单个地址或者连续地址(流操作)的大量内存数据:这和CPU的随机内存访问形成鲜明对比.因为顶点和像素可以独立处理,所以GPU被架构为大量的并行运算:比如NVIDIA…

vue学习笔记计算属性（四）

计算属性就是vue实例里的computed属性,对应一个对象,里面可以放各种方法,方法的作用就是可以生成和数据变量对应的计算后的变量,跟数据相关的复杂逻辑变量,都可以使用计算属性实现,computed里的函数名,对外就是一个变量,默认是getter. <div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed mess…

Vue2.0源码阅读笔记（三）：计算属性

计算属性是基于响应式依赖进行缓存的,只有在相关响应式依赖发生改变时才会重新求值,这种缓存机制在求值消耗比较大的情况下能够显著提高性能. 一.计算属性初始化 Vue 在做数据初始化时,通过 initComputed() 方法初始化计算属性. const computedWatcherOptions = { lazy: true } function initComputed (vm: Component, computed: Object) { const watchers = vm._c…

Vue.js 学习笔记第3章计算属性

本篇目录: 3.1 什么是计算属性 3.2 计算属性用法 3.3 计算属性缓存模板内容的表达式常用语简单的运算,当其过长或逻辑复杂时,会难以维护,本章的计算属性就是用于解决该问题的. 3.1 什么是计算属性通过上一章的介绍,我们已经可以搭建出一个简单的Vue应用,在模板中双向绑定一些数据或表达式了. 但是表达式如果过长,或逻辑更为复杂时,就会变得臃肿甚至难以阅读和维护. 比如: <div id="app"> {{ text.split(",").re…

vue文档阅读笔记——计算属性和侦听器

页面链接:https://cn.vuejs.org/v2/guide/computed.html 注意点计算属性用于替代模板内的表达式. 如果计算属性所依赖的属性未更新,会返回自身的缓存. 侦听器无法侦听对象或者数组,使其作用范围有限.…

vue笔记-模板,计算属性,class与style,data属性

数据和方法 1:只有当实例被创建时 data 中存在的属性才是响应式的,也可以预定义一些空的属性,唯一的意外就是Object.freeze(obj),这会阻止修改现有的属性;也就是说一个数据在放到根实例的data对象之前被Object.freeze操作过,那么就不在动态响应 //存在的属性是响应式的,预定义空的属性 //Object.freeze(obj) 不再响应 data: { newTodoText: '', visitCount: 0, hideCompletedTodos: false…

【20190614笔记（颜色透明度,css,filter,滤镜,计算属性,json和formData转换）】的更多相关文章