本篇内容介绍了“vue cale()计算函数怎么使用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
calc是英文单词calculate的缩写，其实主要用于对项目中一些单位的计算，这里的计算是在calc()函数里面填充表达式去计算，它会返回具体的值
平常我们项目中遇到最多的就是一些普通计算了比如：
<body>
<div class="content"></div>
</body>
// style
.content{
height: calc(100% - 32px);
}这里计算出来的就是页面减去32像素单位的高度，如果父盒子有高度，这个100%就是继承父盒子的高度
<div >
<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)) {
}
“vue cale()计算函数怎么使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
