使用 CSS 去設計 Vue.js 元件
在本文中，我們將探討多種使用 CSS 去設計 Vue.js 元件的方式。 注意: 本教程使用 Vue.js 的單文件元件 最簡單的方式是在 Vue.js 元件中使用 style 標籤，就像在 HTML 中一樣： <template> <p style="text-decoration: underline">Hi!</p> </template> <script> export default { data() { return { decoration: 'underline' } } } </script> 這是最靜態的方式。如果你希望 underline 在元件的資料中被定義，你可以這樣做： <template> <p :style="{'text-decoration': decoration}">Hi!</p> </template> <script> export default { data() { return { decoration: 'underline' } } } </script> :style 是 v-bind:style 的縮寫。在本教程中，我將使用這個縮寫。 注意到我們必須將 text-decoration 用引號包起來。這是因為其中有連字符，而連字符不是有效的 JavaScript 識別符號。 你可以避免使用引號，使用 Vue.js 提供的特殊 camelCase 語法，並將其改寫為 textDecoration：...