vue如何設(shè)置動(dòng)態(tài)的柵格占位、水平偏移量、類名、樣式
設(shè)置動(dòng)態(tài)的柵格占位、水平偏移量、類名、樣式
根據(jù)需求，有些樣式需要在特定情況下觸發(fā)，有的占位需要在特殊條件下展示，
vue中設(shè)置動(dòng)態(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動(dòng)態(tài)控制樣式
在vue項(xiàng)目開發(fā)中，我們經(jīng)常會(huì)通過(guò)給元素動(dòng)態(tài)的添加動(dòng)態(tài)樣式以實(shí)現(xiàn)選中的效果。通過(guò)動(dòng)態(tài)的添加style和class達(dá)到動(dòng)態(tài)更改樣式的效果。
動(dòng)態(tài)添加class名
主要列舉了三種方法，歡迎補(bǔ)充，
第一種：簡(jiǎn)單的根據(jù)表達(dá)式去判斷樣式的顯示，對(duì)象的形式。
第二種：根據(jù)三目表達(dá)式來(lái)進(jìn)行class的動(dòng)態(tài)切換，不能寫成對(duì)象的形式，不然會(huì)報(bào)錯(cuò)。
第三種：相當(dāng)于前兩種的擴(kuò)展，舉例一個(gè)場(chǎng)景便于大家理解，一個(gè)多選項(xiàng)，我要點(diǎn)擊的時(shí)候顯示高亮的效果，那我們肯定需要拿到我們點(diǎn)擊后的標(biāo)識(shí)，將其放在一個(gè)數(shù)組中，然后去遍歷的時(shí)候通過(guò)find方法判斷數(shù)組中是否以及有這個(gè)值了，有的話進(jìn)行樣式的添加。歡迎溝通哈，可能舉例不太明了
<template>
? <div class="home">
? ? <!-- 寫法一：對(duì)象形式，用于指定單個(gè)樣式是否切換-->
? ? <!-- <div :class="{select:num>=10}">動(dòng)態(tài)樣式切換</div> -->
? ? <!-- 寫法二：用于指定多個(gè)樣式切換 -->
? ? <!-- <div :class="[num>=10?'select':'noselect']" >動(dòng)態(tài)樣式切換</div> -->
? ? <!-- 寫法三：復(fù)雜化的寫法 -->
? ? <!-- <div :class="{select:arr.filter(item=>item).length>5}">動(dòng)態(tài)樣式切換</div> -->
? ? <!-- <div :class="[arr.find(item=>item===4)?'select':'noselect']" >動(dòng)態(tài)樣式切換</div> -->
? ? <div>動(dòng)態(tài)樣式切換</div>
? ? <div>{{num}}<button @click="num++">+</button><button @click="num--">-</button></div>
? <h3>實(shí)現(xiàn)當(dāng)num大于10時(shí)頭部問(wèn)題變成紅色</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>動(dòng)態(tài)更改style樣式
適用場(chǎng)景：解決手機(jī)頁(yè)面場(chǎng)景的適配問(wèn)題，比如：蘋果手機(jī)有個(gè)下面的橫杠占位，所以我們要添加對(duì)應(yīng)的margin（蘋果手機(jī)最底部元素添加padding不生效）
<template>
? <div class="home">
? ? <!-- 動(dòng)態(tài)設(shè)置style -->
? ? <div :style="{color:num>=10?'red':'blue'}">動(dòng)態(tài)樣式切換</div>
? ? <div>{{num}}<button @click="num++">+</button><button @click="num--">-</button></div>
? <h3>實(shí)現(xiàn)當(dāng)num大于10時(shí)頭部問(wèn)題變成紅色</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>以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue懸浮窗和聚焦登錄組件經(jīng)驗(yàn)總結(jié),? 本文整理了實(shí)現(xiàn)懸浮窗以及聚焦登錄組件的功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-11-11
這篇文章主要為大家詳細(xì)介紹了vue3中websocket的封裝與使用的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
這篇文章主要介紹了基于iview的router常用控制方式,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
Vue實(shí)現(xiàn)數(shù)字輸入框中分割手機(jī)號(hào)碼的示例
本篇文章主要介紹了Vue實(shí)現(xiàn)數(shù)字輸入框中分割手機(jī)號(hào)碼的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)web分頁(yè)組件的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了vue中使用jwt-decode解析token,文末給大家補(bǔ)充介紹了vue通過(guò)jwt-decode解析token獲取需要的數(shù)據(jù)，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-06-06
Vue.extend實(shí)現(xiàn)掛載到實(shí)例上的方法
這篇文章主要介紹了Vue.extend實(shí)現(xiàn)掛載到實(shí)例上的方法,結(jié)合實(shí)例形式分析了Vue.extend實(shí)現(xiàn)掛載到實(shí)例上的具體操作步驟與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-05-05
這篇文章主要為大家詳細(xì)介紹了使用Vue3封裝一個(gè)通用echarts組件詳解的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02
這篇文章主要給大家介紹了關(guān)于Vue父子之間值傳遞的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
Vue3中導(dǎo)航守衛(wèi)結(jié)合Axios實(shí)現(xiàn)token認(rèn)證機(jī)制
本文主要介紹了Vue3中導(dǎo)航守衛(wèi)結(jié)合Axios實(shí)現(xiàn)token認(rèn)證機(jī)制,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-01-01