手把手教你拿捏vue 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()计算函数使用的资料请关注脚本之家其它相关文章！
相关文章
vue项目打包解决静态资源无法加载和路由加载无效(404)问题
这篇文章主要介绍了vue项目打包，解决静态资源无法加载和路由加载无效(404)问题,静态资源无法使用，那就说明项目打包后，图片和其他静态资源文件相对路径不对,本文给大家介绍的非常详细，需要的朋友跟随小编一起看看吧2023-10-10
这篇文章主要介绍了关于electron-vue打包后运行白屏的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
Vue项目代码之路由拆分、Vuex模块拆分、element按需加载详解
这篇文章主要介绍了Vue项目代码之路由拆分、Vuex模块拆分、element按需加载,项目较大路由较多时，路由拆分是一个不错的代码优化方案，按不同业务分为多个模块，结构清晰便于统一管理，本文通过示例给大家详细讲解，需要的朋友可以参考下2022-11-11
Vue-router优化import引入过多导致index文件臃肿问题
这篇文章主要为大家介绍了Vue-router优化import引入过多导致index文件臃肿问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
这篇文章主要介绍了浅谈VUE防抖与节流的最佳解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了Vue(element ui)中操作row参数的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
这篇文章主要介绍了详解vue 项目白屏解决方案，详细的介绍了白屏的解决方案，非常具有实用价值，需要的朋友可以参考下2018-10-10
vue-cli history模式实现tomcat部署报404的解决方式
这篇文章主要介绍了vue-cli history模式实现tomcat部署报404的解决方式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要介绍了Vue首页加载过慢的解决方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
本篇文章主要介绍了详解在vue-cli中使用路由，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
最新评论