vue如何設(shè)置動態(tài)的柵格占位、水平偏移量、類名、樣式
設(shè)置動態(tài)的柵格占位、水平偏移量、類名、樣式
根據(jù)需求,有些樣式需要在特定情況下觸發(fā),有的占位需要在特殊條件下展示,
vue中設(shè)置動態(tài)如下
代碼:
<template> <a-row style="border: 1px solid"> <a-col :span=" bool1 ? '6' : '10'" :offset=" bool1 ? '6' : '2'" :class="{ 'left-style': bool1, 'right-style':!bool1 }" :style="{ paddingRight: bool1 ? '10px' : '50px'}" > <div class="test-active"></div> </a-col> </a-row> </template>
<script> export default { name: 'Self', data () { return { bool1: false } } } </script>
<style scoped> .test-active { width: 100%; height: 200px; border: 1px solid blueviolet; } .left-style { background-color: pink; } .right-style { background-color: skyblue; } </style>
效果:
注解:
bool1為false,則占10位,并且水平方向偏移2位,類名right-style起作用,paddingRight為50px起作用
vue動態(tài)控制樣式
在vue項目開發(fā)中,我們經(jīng)常會通過給元素動態(tài)的添加動態(tài)樣式以實現(xiàn)選中的效果。通過動態(tài)的添加style和class達到動態(tài)更改樣式的效果。
動態(tài)添加class名
主要列舉了三種方法,歡迎補充,
第一種:簡單的根據(jù)表達式去判斷樣式的顯示,對象的形式。
第二種:根據(jù)三目表達式來進行class的動態(tài)切換,不能寫成對象的形式,不然會報錯。
第三種:相當于前兩種的擴展,舉例一個場景便于大家理解,一個多選項,我要點擊的時候顯示高亮的效果,那我們肯定需要拿到我們點擊后的標識,將其放在一個數(shù)組中,然后去遍歷的時候通過find方法判斷數(shù)組中是否以及有這個值了,有的話進行樣式的添加。歡迎溝通哈,可能舉例不太明了
<template> ? <div class="home"> ? ? <!-- 寫法一:對象形式,用于指定單個樣式是否切換--> ? ? <!-- <div :class="{select:num>=10}">動態(tài)樣式切換</div> --> ? ? <!-- 寫法二:用于指定多個樣式切換 --> ? ? <!-- <div :class="[num>=10?'select':'noselect']" >動態(tài)樣式切換</div> --> ? ? <!-- 寫法三:復(fù)雜化的寫法 --> ? ? <!-- <div :class="{select:arr.filter(item=>item).length>5}">動態(tài)樣式切換</div> --> ? ? <!-- <div :class="[arr.find(item=>item===4)?'select':'noselect']" >動態(tài)樣式切換</div> --> ? ? <div>動態(tài)樣式切換</div> ? ? <div>{{num}}<button @click="num++">+</button><button @click="num--">-</button></div> ? <h3>實現(xiàn)當num大于10時頭部問題變成紅色</h3> ?? ? </div> </template>
<script> export default { ? name: 'Home', ? data(){ ? ? return{ ? ? ? num:1, ? ? ? arr:[1,2,3,4,5,6] ? ? } ? } } </script>
<style> ? button{ ? ? padding: 5px; ? ? background: #f5f5f5; ? ? margin:10px ; } .select{ ? color: red; } .noselect{ ? color: blue; } </style>
動態(tài)更改style樣式
適用場景:解決手機頁面場景的適配問題,比如:蘋果手機有個下面的橫杠占位,所以我們要添加對應(yīng)的margin(蘋果手機最底部元素添加padding不生效)
<template> ? <div class="home"> ? ? <!-- 動態(tài)設(shè)置style --> ? ? <div :style="{color:num>=10?'red':'blue'}">動態(tài)樣式切換</div> ? ? <div>{{num}}<button @click="num++">+</button><button @click="num--">-</button></div> ? <h3>實現(xiàn)當num大于10時頭部問題變成紅色</h3> ?? ? </div> </template>
<script> export default { ? name: 'Home', ? data(){ ? ? return{ ? ? ? num:1, ? ? ? arr:[1,2,3,4,5,6] ? ? } ? } } </script>
<style> ? button{ ? ? padding: 5px; ? ? background: #f5f5f5; ? ? margin:10px ; } .select{ ? color: red; } .noselect{ ? color: blue; } </style>
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
使用vue與jquery實時監(jiān)聽用戶輸入狀態(tài)的操作代碼
本文是腳本之家小編給大家?guī)淼氖褂胿ue與jquery實時監(jiān)聽用戶輸入狀態(tài),實現(xiàn)效果是input未輸入值時,按鈕禁用狀態(tài),具體操作代碼大家參考下本文吧2017-09-09VueJs中如何使用Teleport及組件嵌套層次結(jié)構(gòu)詳解
這篇文章主要為大家介紹了VueJs中如何使用Teleport及組件嵌套層次結(jié)構(gòu)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-04-04Vue實現(xiàn)input寬度隨文字長度自適應(yīng)操作
這篇文章主要介紹了Vue實現(xiàn)input寬度隨文字長度自適應(yīng)操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07vue-cli與webpack處理靜態(tài)資源的方法及webpack打包的坑
這篇文章主要介紹了vue-cli與webpack處理靜態(tài)資源的方法,需要的朋友可以參考下2018-05-05