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)樣式以實(shí)現(xiàn)選中的效果。通過動態(tài)的添加style和class達(dá)到動態(tài)更改樣式的效果。
動態(tài)添加class名
主要列舉了三種方法，歡迎補(bǔ)充，
第一種：簡單的根據(jù)表達(dá)式去判斷樣式的顯示，對象的形式。
第二種：根據(jù)三目表達(dá)式來進(jìn)行class的動態(tài)切換，不能寫成對象的形式，不然會報錯。
第三種：相當(dāng)于前兩種的擴(kuò)展，舉例一個場景便于大家理解，一個多選項，我要點(diǎn)擊的時候顯示高亮的效果，那我們肯定需要拿到我們點(diǎn)擊后的標(biāo)識，將其放在一個數(shù)組中，然后去遍歷的時候通過find方法判斷數(shù)組中是否以及有這個值了，有的話進(jìn)行樣式的添加。歡迎溝通哈，可能舉例不太明了
<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>實(shí)現(xiàn)當(dāng)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樣式
適用場景：解決手機(jī)頁面場景的適配問題，比如：蘋果手機(jī)有個下面的橫杠占位，所以我們要添加對應(yīng)的margin（蘋果手機(jī)最底部元素添加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>實(shí)現(xiàn)當(dāng)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)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用vue與jquery實(shí)時監(jiān)聽用戶輸入狀態(tài)的操作代碼
本文是腳本之家小編給大家?guī)淼氖褂胿ue與jquery實(shí)時監(jiān)聽用戶輸入狀態(tài)，實(shí)現(xiàn)效果是input未輸入值時，按鈕禁用狀態(tài)，具體操作代碼大家參考下本文吧2017-09-09
VueJs中如何使用Teleport及組件嵌套層次結(jié)構(gòu)詳解
這篇文章主要為大家介紹了VueJs中如何使用Teleport及組件嵌套層次結(jié)構(gòu)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
Vue實(shí)現(xiàn)input寬度隨文字長度自適應(yīng)操作
這篇文章主要介紹了Vue實(shí)現(xiàn)input寬度隨文字長度自適應(yīng)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue?Store是的狀態(tài)管理模式和庫,它提供了一種集中存儲管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化,這篇文章主要介紹了Vue?關(guān)于Store的用法,需要的朋友可以參考下2024-08-08
v-cloak原理是先通過樣式隱藏內(nèi)容,然后在內(nèi)存中進(jìn)行值的替換,將替換的內(nèi)容再反饋給界面,數(shù)據(jù)渲染完場之后,v-cloak 屬性會被自動去除,本文詳細(xì)介紹vue中v-cloak的作用和原理解析,感興趣的朋友一起看看吧2023-09-09
這篇文章主要介紹了聊聊Vue.js的template編譯的問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
vue-cli與webpack處理靜態(tài)資源的方法及webpack打包的坑
這篇文章主要介紹了vue-cli與webpack處理靜態(tài)資源的方法,需要的朋友可以參考下2018-05-05
在這篇文章中,我們將探討五個實(shí)用的?Vue?技巧,這些技巧可以使你日常使用?Vue?編程更高效、更富有成效,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-08-08
這篇文章主要介紹了vue中遇到scrollIntoView無效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
vue項目首屏加載時間優(yōu)化實(shí)戰(zhàn)
單頁面應(yīng)用的一個問題就是首頁加載東西過多，加載時間過長。特別在移動端，單頁面應(yīng)用的首屏加載優(yōu)化更是繞不開的話題，這篇文章主要介紹了vue項目首屏加載時間優(yōu)化實(shí)戰(zhàn)，感興趣的小伙伴們可以參考一下2019-04-04