亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue如何設(shè)置動態(tài)的柵格占位、水平偏移量、類名、樣式

 更新時間:2022年09月15日 11:04:51   作者:加雞腿  
這篇文章主要介紹了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)的操作代碼

    使用vue與jquery實時監(jiān)聽用戶輸入狀態(tài)的操作代碼

    本文是腳本之家小編給大家?guī)淼氖褂胿ue與jquery實時監(jiān)聽用戶輸入狀態(tài),實現(xiàn)效果是input未輸入值時,按鈕禁用狀態(tài),具體操作代碼大家參考下本文吧
    2017-09-09
  • VueJs中如何使用Teleport及組件嵌套層次結(jié)構(gòu)詳解

    VueJs中如何使用Teleport及組件嵌套層次結(jié)構(gòu)詳解

    這篇文章主要為大家介紹了VueJs中如何使用Teleport及組件嵌套層次結(jié)構(gòu)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-04-04
  • Vue實現(xiàn)input寬度隨文字長度自適應(yīng)操作

    Vue實現(xiàn)input寬度隨文字長度自適應(yīng)操作

    這篇文章主要介紹了Vue實現(xiàn)input寬度隨文字長度自適應(yīng)操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • Vue?關(guān)于Store的用法小結(jié)

    Vue?關(guān)于Store的用法小結(jié)

    Vue?Store是的狀態(tài)管理模式和庫,它提供了一種集中存儲管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化,這篇文章主要介紹了Vue?關(guān)于Store的用法,需要的朋友可以參考下
    2024-08-08
  • vue中v-cloak的作用和原理解析

    vue中v-cloak的作用和原理解析

    v-cloak原理是先通過樣式隱藏內(nèi)容,然后在內(nèi)存中進行值的替換,將替換的內(nèi)容再反饋給界面,數(shù)據(jù)渲染完場之后,v-cloak 屬性會被自動去除,本文詳細介紹vue中v-cloak的作用和原理解析,感興趣的朋友一起看看吧
    2023-09-09
  • 聊聊Vue.js的template編譯的問題

    聊聊Vue.js的template編譯的問題

    這篇文章主要介紹了聊聊Vue.js的template編譯的問題,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-10-10
  • vue-cli與webpack處理靜態(tài)資源的方法及webpack打包的坑

    vue-cli與webpack處理靜態(tài)資源的方法及webpack打包的坑

    這篇文章主要介紹了vue-cli與webpack處理靜態(tài)資源的方法,需要的朋友可以參考下
    2018-05-05
  • 5個實用的Vue技巧分享

    5個實用的Vue技巧分享

    在這篇文章中,我們將探討五個實用的?Vue?技巧,這些技巧可以使你日常使用?Vue?編程更高效、更富有成效,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2023-08-08
  • vue中遇到scrollIntoView無效問題及解決

    vue中遇到scrollIntoView無效問題及解決

    這篇文章主要介紹了vue中遇到scrollIntoView無效問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-05-05
  • vue項目首屏加載時間優(yōu)化實戰(zhàn)

    vue項目首屏加載時間優(yōu)化實戰(zhàn)

    單頁面應(yīng)用的一個問題就是首頁加載東西過多,加載時間過長。特別在移動端,單頁面應(yīng)用的首屏加載優(yōu)化更是繞不開的話題,這篇文章主要介紹了vue項目首屏加載時間優(yōu)化實戰(zhàn),感興趣的小伙伴們可以參考一下
    2019-04-04

最新評論