手把手教你拿捏vue cale()计算函数使用

目录
  • 前言
  • cale()是什么
  • 基本使用
  • 灵活使用
  • 注意
  • 兼容性
  • 结尾

前言

最近项目中遇到calc()方法不生效问题，本着究其所以然的想法，彻底查了一下calc的方法及使用，还有为什么项目中使用不生效的问题，最后总结出此文，解决方法放在结尾了

cale()是什么

calc是英文单词calculate的缩写，其实主要用于对项目中一些单位的计算，这里的计算是在calc()函数里面填充表达式去计算，它会返回具体的值

基本使用

平常我们项目中遇到最多的就是一些普通计算了比如：

<body>
    <div class="content"></div>
</body>
// style
 .content{
   height: calc(100% - 32px);
 }

这里计算出来的就是页面减去32像素单位的高度，如果父盒子有高度，这个100%就是继承父盒子的高度

<div style="height: 200px">
    <div class="content"></div>
</div>
// style
.content {
  background-color: #6b3434;
  height: calc(100% - 100px);
}

除了加减法calc()还支持乘除，乘除法要求必须要有一个参数是数字，而且除法的右边参数必须是数字;加、减、乘、除('+'、'-'、'*'、'/'、)，乘除法的运算规则也是一样的会先运算乘除再算加减，所以我们不需要刻意的使用括号去包裹，但是如果你是需要先运算加减则要先用括号进行包裹

灵活使用

calc()除了这些用法还有一些比较灵活用法：

// 计算属性里面
newWidth:{
// data里设置一个menuWidth变量来操控width的大小
    return width: `calc(100% - ${menuWidth}px)`
}

还有比如我这篇旋转方块里面的每一个点的旋转用到的就是css中的自定义属性来运算，运用style中的--i属性来控制变量，从而减少我们大量的css去计算的代码

transform: rotate(calc(30deg * var(--i)));

而且calc()还支持混合单位运算，在参数单位不同时，会做预处理比如：

// turn 代表一个圆的圈，1turn就是一圈
// deg 代表角度45deg就是45度
transform: rotate(calc(1turn + 45deg))

而且calc()支持很多单位：'px，%，em，rem，vw，vh，cm，pt，pc，vmin，vmax，vh'等

注意

calc()表达式的参数一定要用空格隔开，并且也是支持负数计算的，而且calc()不支持媒体查询哦！！

// 本身写法
@media (max-width: 600px) {
}
// 不支持的calc写法
@media (min-width: calc(400px + 200px)) {
}

兼容性

结尾

本人项目中使用的less预处理器，所以在使用calc()时会和less的一些语法有冲突，所以官方推荐使用 '~' 来进行转译这是官方文档

以上就是手把手教你拿捏vue cale()计算函数使用的详细内容，更多关于vue cale()计算函数使用的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 在Vue项目中用fullcalendar制作日程表的示例代码

    前言 最近老牌日历插件fullcalendar更新了v4版本,而且添加了Vue支持,所以用最新的fullcalendar v4制作一个完整日历体验一下,效果图: 安装 FullCalendar的功能被分解为"插件".如果您需要它提供的功能,您只需要包含一个插件. 也就是说,FullCalendar v4所有插件都得单独安装引用. npm install --save @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid 引

  • vue-calendar-component 封装多日期选择组件的实例代码

    vue-calendar-component 封装多日期选择组件的实例代码

    实现效果 安装vue-calendar-component日历组件 cnpm i vue-calendar-component --save //国内镜像 引入 import Calendar from "vue-calendar-component"; export default { components: { Calendar }, } 封装 <template> <div class="x-f"> <Calendar ref=&

  • 关于vue-lunar-full-calendar的使用说明

    目录 vue-lunar-full-calendar的使用 效果图 使用vue-full-calendar时报错及解决 vue-lunar-full-calendar的使用 效果图 首先安装: npm install --save vue-lunar-full-calendar 在main.js中全局引入: import LunarFullCalendar from "vue-lunar-full-calendar"; Vue.use(LunarFullCalendar); 在需要用到

  • 基于Vue2-Calendar改进的日历组件（含中文使用说明）

    一,前言 我是刚学Vue的菜鸟,在使用过程中需要用到日历控件,由于项目中原来是用jQuery写的,因此用了bootstarp的日历控件,但是配合Vue实在有点蛋疼,不够优雅-- 于是网上搜了好久找到了Vue2-Calendar,不用说,挺好用的,但是同时也发现这个组件有些问题,有些功能挺不符合我们的要求,于是着手改了一版 二,改进的功能 在Vue2-Calendar v2.2.4 版基础上作了优化. 1.改进原控件无法切换语言的BUG,支持 lang='zh-CN'和'en'. 2.日历面板增加

  • 手把手教你拿捏vue cale()计算函数使用

    目录 前言 cale()是什么 基本使用 灵活使用 注意 兼容性 结尾 前言 最近项目中遇到calc()方法不生效问题,本着究其所以然的想法,彻底查了一下calc的方法及使用,还有为什么项目中使用不生效的问题,最后总结出此文,解决方法放在结尾了 cale()是什么 calc是英文单词calculate的缩写,其实主要用于对项目中一些单位的计算,这里的计算是在calc()函数里面填充表达式去计算,它会返回具体的值 基本使用 平常我们项目中遇到最多的就是一些普通计算了比如: <body> <

  • 手把手教你使用Django + Vue.js 快速构建项目

    手把手教你使用Django + Vue.js 快速构建项目

    目录 1. 前言 2. 环境准备 3. 创建 Django 项目 4. 创建 Vue.js 前端项目 5. 解决跨域问题 6. 整合 Django 和 Vue.js 前端 1. 前言 本篇将基于Django + Vue.js,手把手教大家快速的实现一个前后端分离的Web项目. 2. 环境准备 Python 3.6.1 Mysql 5.7.23 Pycharm (专业版) Node 3. 创建 Django 项目 创建完成后,目录结构如下所示 使用 Navicat 工具创建数据库 DjangoVu

  • 手把手教你写一个vue全局注册的Toast的实现

    手把手教你写一个vue全局注册的Toast的实现

    目录 前言: 我们先思考下面的问题: 首先: 然后: 后来: 再且: 前言: 前几天客户经理不让我用某饿了么之类的UI库做一个轻提示之类的组件,当时一想我是饿了么战士,怎么会写哪个东西,然后我就想着用个alert糊弄过去,但是不行,然后我就细琢磨,发现Vue有个非常不错的Vue.extend. 经过一番努力,我学会了,可能是以前学的时候马虎漏掉了.不过问题不大,还能肝. 我们先思考下面的问题: 在写vue项目的时候啊,我们有了初始化的根实例之后,页面之间都是通过router进行管理,组件也是通过

  • 手把手教你搭建一个vue项目的完整步骤

    手把手教你搭建一个vue项目的完整步骤

    目录 一.环境准备 1.安装node.js 2.检查node.js版本 3.为了提高我们的效率,可以使用淘宝的镜像源 二.搭建vue环境 1.全局安装vue-cli 三.创建vue项目 1.用cmd命令创建项目 1.1创建文件 1.2选择配置信息 1.3选择版本 1.4路径模式选择 1.5语法代码格式检查 1.6第三方文件存在的方式 1.7是否保存本次配置信息(保存预设) 1.8创建成功 1.9运行 1.10启动 1.11停止服务 2.用vue资源管理器创建 2.1进入vue资源管理器界面(vu

  • 手把手教你如何在vue项目中使用rem布局

    目录 如何在vue项目中使用rem布局 方法一:使用lib-flexible 1. 安装包 2. 引入文件 3. 根据需要设置rem 4.使用rem 方法二:使用postcss-pxtorem 1. 安装包 2. 创建rem.js文件 3. 新建 .postcssrc.js 4. 在main.js中引入 5. 设置body的font-size 6. 可参照流程图 总结 如何在vue项目中使用rem布局 场景: 在我们开发移动端项目中,实现手机页面布局,需要使用rem布局,那么该如何使用呢? 本文

  • 手把手教你搭建vue3.0项目架构

    手把手教你搭建vue3.0项目架构

    前言: GitHub上我开源了vue-cli.vue-cli3两个库,文章末尾会附上GitHub仓库地址.这次把2.0的重新写了一遍,优化了一下.然后按照2.0的功能和代码,按照vue3.0的语法,完全重写了一遍.虽然名字叫cli,其实两个库都是基于vue-cli创建的.做这个的目的是为了工作中快速启动项目,毕竟切片打包.less.axios.vuex.router.UI框架.基础文件目录.权限,这些都是基操,当然项目不同,还是要做些调整的.这两个项目的master分支都是最基础的东西,里面还包

  • 手把手教你写一个微信小程序（推荐）

    需求 小程序语音识别,全景图片观看,登录授权,获取个人基本信息 一:基础框架 官方开发文档:https://developers.weixin.qq.com/miniprogram/dev/ (其实官方文档写的很清楚了) 1.跟着官方文档一步一步来,新建一个小程序项目就好 2.然后呢,毕竟默认的只是基本骨架,肌肉线条还是要自己填的 app.json 是当前小程序的全局配置 小程序的所有页面路径.界面表现.网络超时时间.底部 tab 需求一:底部tab,我们要像原生APP那样要有是三个常驻的按钮,

  • Python数据分析:手把手教你用Pandas生成可视化图表的教程

    大家都知道,Matplotlib 是众多 Python 可视化包的鼻祖,也是Python最常用的标准可视化库,其功能非常强大,同时也非常复杂,想要搞明白并非易事.但自从Python进入3.0时代以后,pandas的使用变得更加普及,它的身影经常见于市场分析.爬虫.金融分析以及科学计算中. 作为数据分析工具的集大成者,pandas作者曾说,pandas中的可视化功能比plt更加简便和功能强大.实际上,如果是对图表细节有极高要求,那么建议大家使用matplotlib通过底层图表模块进行编码.当然,我

  • 手把手教你实现PyTorch的MNIST数据集

    手把手教你实现PyTorch的MNIST数据集

    概述 MNIST 包含 0~9 的手写数字, 共有 60000 个训练集和 10000 个测试集. 数据的格式为单通道 28*28 的灰度图. 获取数据 def get_data(): """获取数据""" # 获取测试集 train = torchvision.datasets.MNIST(root="./data", train=True, download=True, transform=torchvision.tran

  • 手把手教你使用TensorFlow2实现RNN

    手把手教你使用TensorFlow2实现RNN

    目录 概述 权重共享 计算过程: 案例 数据集 RNN 层 获取数据 完整代码 概述 RNN (Recurrent Netural Network) 是用于处理序列数据的神经网络. 所谓序列数据, 即前面的输入和后面的输入有一定的联系. 权重共享 传统神经网络: RNN: RNN 的权重共享和 CNN 的权重共享类似, 不同时刻共享一个权重, 大大减少了参数数量. 计算过程: 计算状态 (State) 计算输出: 案例 数据集 IBIM 数据集包含了来自互联网的 50000 条关于电影的评论,

随机推荐