溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
