Vue 如何在Vue中使用樣式

2022-08-14 19:48:13 字數 1365 閱讀 7934

使用class樣式

1.陣列

第一種使用方式,直接傳遞乙個陣列,注意:這裡的class需要使用 v-bind做資料繫結

2.陣列中使用三元表示式

3.陣列中巢狀物件

4.直接使用物件(不用陣列包裹)

既然是乙個物件,那我們也可以直接在data身上寫進行儲存

內聯樣式

1.直接在元素上通過v-bind:style的形式,書寫樣式物件

2.將樣式物件,定義到 data 中, 並直接引用到v-bind:style中

2.1在data上定義的樣式

2.2在元素中,通過屬性繫結的形式,將樣式物件應用到元素中

3.在v-bind:style中通過陣列,引用多個data上樣式物件

3.1在data上定義的樣式

3.2在元素中,通過屬性繫結的形式,將樣式物件應用到元素中

如何在vue中使用樣式

1.陣列 這是乙個h2.陣列中使用三元表示式 這是乙個h3.陣列中巢狀物件 這是乙個h4.直接使用物件 這是乙個h5.使用內聯樣式 1.直接在元素上通過 style的的形式,書寫樣式物件 這是乙個h2.將樣式物件,定義到data中,並直接引用到 style中 在data上定義樣式 data 在元素中...

如何在 vue 中使用 svg symbols

安裝 svg sprite loadernpm install svg sprite loader d via yarn yarn add svg sprite loader d在vue.config.js中配置 svg sprite loaderconst path require path mo...

如何在vue中使用highcharts

1 首先npm install s vue highcharts 2 在main.js中寫入全域性使用 import highcharts from highcharts import vuehighcharts from vue highcharts import highcharts3d fro...