手把手教你拿捏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项目如何使用base64加密，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了Vue3不支持Filters过滤器的问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-09
本篇文章主要介绍了详解VueRouter进阶之导航钩子和路由元信息，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
这篇文章主要介绍了Vuejs第七篇之Vuejs过渡动画案例全面解析的相关资料,需要的朋友可以参考下2016-09-09
这篇文章主要介绍了vue点击按钮实现让页面的某一个元素全屏展示，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
下面小编就为大家分享一篇vue项目中使用ueditor的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了vue 地区选择器v-distpicker的常用功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
本篇文章主要介绍了vue如何获取点击事件源的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
vue3中getCurrentInstance获取组件实例踩坑详细记录
getCurrentInstance()是Vue.js3 Composition API中的一个函数,它的作用是获取当前组件的实例对象,下面这篇文章主要给大家介绍了关于vue3中getCurrentInstance获取组件踩坑的相关资料,需要的朋友可以参考下2024-02-02
Nvue是一个基于weex改进的原生渲染引擎,它在某些方面要比vue更高性能,在app上使用更加流畅,这篇文章主要介绍了nvue页面用法uniapp,需要的朋友可以参考下2023-12-12
最新评论