手把手教你拿捏vue?cale()計(jì)算函數(shù)使用
前言
最近項(xiàng)目中遇到calc()方法不生效問題，本著究其所以然的想法，徹底查了一下calc的方法及使用，還有為什么項(xiàng)目中使用不生效的問題，最后總結(jié)出此文，解決方法放在結(jié)尾了
cale()是什么
calc是英文單詞calculate的縮寫，其實(shí)主要用于對(duì)項(xiàng)目中一些單位的計(jì)算，這里的計(jì)算是在calc()函數(shù)里面填充表達(dá)式去計(jì)算，它會(huì)返回具體的值
基本使用
平常我們項(xiàng)目中遇到最多的就是一些普通計(jì)算了比如：
<body>
<div class="content"></div>
</body>
// style
.content{
height: calc(100% - 32px);
}
這里計(jì)算出來的就是頁面減去32像素單位的高度，如果父盒子有高度，這個(gè)100%就是繼承父盒子的高度
<div style="height: 200px">
<div class="content"></div>
</div>
// style
.content {
background-color: #6b3434;
height: calc(100% - 100px);
}
除了加減法calc()還支持乘除，乘除法要求必須要有一個(gè)參數(shù)是數(shù)字，而且除法的右邊參數(shù)必須是數(shù)字;加、減、乘、除('+'、'-'、'*'、'/'、)，乘除法的運(yùn)算規(guī)則也是一樣的會(huì)先運(yùn)算乘除再算加減，所以我們不需要刻意的使用括號(hào)去包裹，但是如果你是需要先運(yùn)算加減則要先用括號(hào)進(jìn)行包裹
靈活使用
calc()除了這些用法還有一些比較靈活用法：
// 計(jì)算屬性里面
newWidth:{
// data里設(shè)置一個(gè)menuWidth變量來操控width的大小
return width: `calc(100% - ${menuWidth}px)`
}
還有比如我這篇旋轉(zhuǎn)方塊里面的每一個(gè)點(diǎn)的旋轉(zhuǎn)用到的就是css中的自定義屬性來運(yùn)算，運(yùn)用style中的--i屬性來控制變量，從而減少我們大量的css去計(jì)算的代碼
transform: rotate(calc(30deg * var(--i)));
而且calc()還支持混合單位運(yùn)算，在參數(shù)單位不同時(shí)，會(huì)做預(yù)處理比如：
// turn 代表一個(gè)圓的圈，1turn就是一圈 // deg 代表角度45deg就是45度 transform: rotate(calc(1turn + 45deg))
而且calc()支持很多單位：'px，%，em，rem，vw，vh，cm，pt，pc，vmin，vmax，vh'等
注意
calc()表達(dá)式的參數(shù)一定要用空格隔開，并且也是支持負(fù)數(shù)計(jì)算的，而且calc()不支持媒體查詢哦??！
// 本身寫法
@media (max-width: 600px) {
}
// 不支持的calc寫法
@media (min-width: calc(400px + 200px)) {
}
兼容性
結(jié)尾
本人項(xiàng)目中使用的less預(yù)處理器，所以在使用calc()時(shí)會(huì)和less的一些語法有沖突，所以官方推薦使用 '~' 來進(jìn)行轉(zhuǎn)譯這是官方文檔
以上就是手把手教你拿捏vue cale()計(jì)算函數(shù)使用的詳細(xì)內(nèi)容，更多關(guān)于vue cale()計(jì)算函數(shù)使用的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue項(xiàng)目打包解決靜態(tài)資源無法加載和路由加載無效(404)問題
這篇文章主要介紹了vue項(xiàng)目打包，解決靜態(tài)資源無法加載和路由加載無效(404)問題,靜態(tài)資源無法使用，那就說明項(xiàng)目打包后，圖片和其他靜態(tài)資源文件相對(duì)路徑不對(duì),本文給大家介紹的非常詳細(xì)，需要的朋友跟隨小編一起看看吧2023-10-10
關(guān)于electron-vue打包后運(yùn)行白屏的解決方案
這篇文章主要介紹了關(guān)于electron-vue打包后運(yùn)行白屏的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue項(xiàng)目代碼之路由拆分、Vuex模塊拆分、element按需加載詳解
這篇文章主要介紹了Vue項(xiàng)目代碼之路由拆分、Vuex模塊拆分、element按需加載,項(xiàng)目較大路由較多時(shí)，路由拆分是一個(gè)不錯(cuò)的代碼優(yōu)化方案，按不同業(yè)務(wù)分為多個(gè)模塊，結(jié)構(gòu)清晰便于統(tǒng)一管理，本文通過示例給大家詳細(xì)講解，需要的朋友可以參考下2022-11-11
Vue-router優(yōu)化import引入過多導(dǎo)致index文件臃腫問題
這篇文章主要為大家介紹了Vue-router優(yōu)化import引入過多導(dǎo)致index文件臃腫問題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
淺談VUE防抖與節(jié)流的最佳解決方案(函數(shù)式組件)
這篇文章主要介紹了淺談VUE防抖與節(jié)流的最佳解決方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Vue(element ui)中操作row參數(shù)的使用方式
這篇文章主要介紹了Vue(element ui)中操作row參數(shù)的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
這篇文章主要介紹了詳解vue 項(xiàng)目白屏解決方案，詳細(xì)的介紹了白屏的解決方案，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-10-10
vue-cli history模式實(shí)現(xiàn)tomcat部署報(bào)404的解決方式
這篇文章主要介紹了vue-cli history模式實(shí)現(xiàn)tomcat部署報(bào)404的解決方式,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要介紹了Vue首頁加載過慢的解決方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
本篇文章主要介紹了詳解在vue-cli中使用路由，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09