溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“vue小技巧方法教程”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“vue小技巧方法教程”吧！
一、內容簡介
在使用vue開發時，經常會封裝很多的組件方便復用，那么難免就有寫樣式相關組件，比如需要使用時傳入顏色、高度等樣式參數。
那么問題來了：我們要怎么在樣式中使用組件中接收的參數呢?或者說，我們要怎么在樣式中使用data中的變量呢?
二、代碼演示
這個用法真的簡單，沒什么其他的知識點，直接上代碼：
<template> <div class="box" :style="styleVar"> </div> </template> <script> export default { props: { height: { type: Number, default: 54, }, }, computed: { styleVar() { return { '--box-height': this.height + 'px' } } }, } </script> <style scoped> .box { height: var(--box-height); } </style>這樣我們就在vue中實現了在樣式里使用js變量的方法：
及通過css定義變量的方式，將變量在行內注入，然后在style中使用var()獲取我們在行內設置的數據即可。
感謝各位的閱讀，以上就是“vue小技巧方法教程”的內容了，經過本文的學習后，相信大家對vue小技巧方法教程這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
