前端之vue样式
vue樣式
- 綁定樣式
- 單個類樣式的動態使用 -- 字符串寫法
- 多個類樣式的動態使用 -- 數組寫法
- 對象寫法
- 內聯style動態綁定樣式 -- 用對象
綁定樣式
不要自己動用DOM，使用Vue的屬性 :class
所以不改變的樣式正常寫，改變的樣式用:class指定一個data變量
單個類樣式的動態使用 – 字符串寫法
用于要綁定的類的名字不確定
<style>/* 類樣式 */.basic {height: 200px;width: 600px;}.happy {border: blue solid 2px;background-color: red;}.sad {border: yellow solid 2px;background-color: greenyellow;}.normal {border: black solid 2px;background-color: blue;}</style><body><!-- 容器 --><div id="root"><div class="basic" :class="mood" @click="changeMood">{{name}}</div></div><script>Vue.config.productionTip = false; // 阻止 Vue 在啟動時生成的生產提示new Vue({el: '#root',data() {return {name: '類樣式實例',mood: 'normal',}},methods: {changeMood() {const arr = ['sad', 'normal', 'happy'];this.mood = arr[Math.floor(Math.random() * 3)];}}})</script> </body>多個類樣式的動態使用 – 數組寫法
用于要綁定的類的名字和個數都不確定
<div class="basic" :class="fontArr">{{name}}</div> data() {return {name: '類樣式實例',mood: 'normal',fontArr: ['font1', 'font2', 'font3']}補充對數組的操作:
| 列表頭 | shift | ushift |
| 列表尾 | push | pop |
對象寫法
用于要綁定的類的名字和個數都確定，但是要動態的選擇要不要用
<div class="basic" :class="fontObj">{{name}}</div> data() {return {name: '類樣式實例',fontObj: {font1: true,font2: true,font3: true}}}內聯style動態綁定樣式 – 用對象
<div class="basic" :style="styleObj">{{name}}</div><div class="basic" :style="styleArr">{{name}}</div>styleObj對象內的屬性是已有的樣式屬性用小駝峰命名格式寫的
styleArr數組內是有多個styleObj組成。
eg:
下一節：前端之vue條件渲染、列表渲染
總結
- 上一篇： mediawiki搭建使用
- 下一篇： vue项目中使用高德地图实现添加点标记和