国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

vue2和vue3關(guān)于class類的綁定以及style的綁定的區(qū)別

這篇具有很好參考價值的文章主要介紹了vue2和vue3關(guān)于class類的綁定以及style的綁定的區(qū)別。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方,請大家不吝賜教,您也可以點擊"舉報違法"按鈕提交疑問。

本篇為個人筆記

1.對于class類的綁定的區(qū)別

vue2:對于vue2而言,所有類的綁定都是基于對象{}來進行的

例如:單個類綁定

<div :class="{active:isActive}"></div>

vue2和vue3關(guān)于class類的綁定以及style的綁定的區(qū)別,前端筆記,前端,javascript,vue.js

多個類綁定:

<div :class="{active,hasError,test1,test2,me:isMe}"></div>

vue2和vue3關(guān)于class類的綁定以及style的綁定的區(qū)別,前端筆記,前端,javascript,vue.js?

?vue3:vue3的類綁定是基于數(shù)組[]來進行的

例如:單個綁定

<div :class="[isActive?'active':'']"></div>

vue2和vue3關(guān)于class類的綁定以及style的綁定的區(qū)別,前端筆記,前端,javascript,vue.js

?多個綁定

<div :class="['a','b','c',IsError?'hasError':'',IsMe?'d':'e']"></div>

vue2和vue3關(guān)于class類的綁定以及style的綁定的區(qū)別,前端筆記,前端,javascript,vue.js文章來源地址http://www.zghlxwxcb.cn/news/detail-603358.html

?2.對于style的綁定

vue2和vue3對于style的綁定沒有變化,都是基于對象{}

<div :style="{color:'red'}"></div>
或者
<div :style="styleObj"></div>


vue2中:
data(){
    return{
        styleObj:{
            color:'red'
        }
    }
}

vue3中:
<script setup lang="ts">
    let styleObj = {
            color:'red'
    }
</script>

到了這里,關(guān)于vue2和vue3關(guān)于class類的綁定以及style的綁定的區(qū)別的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權(quán),不承擔相關(guān)法律責任。如若轉(zhuǎn)載,請注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符,請點擊違法舉報進行投訴反饋,一經(jīng)查實,立即刪除!

領支付寶紅包贊助服務器費用

相關(guān)文章

  • uniapp、vue中動態(tài)添加綁定style、class

    1.普通對象動態(tài)添加(比較常見) 2. 數(shù)組 對象動態(tài)添加 3.三目運算動態(tài)添加

    2024年02月16日
    瀏覽(27)
  • vue、uniapp中動態(tài)添加綁定style、class 9種方法實現(xiàn)

    直接使用靜態(tài)class和style屬性: 使用場景:當class和style屬性是固定不變的時候,可以直接在模板中寫死。 優(yōu)點:簡單直接,沒有額外的計算和邏輯。 缺點:無法根據(jù)條件動態(tài)修改class和style。 使用v-bind動態(tài)綁定class和style屬性: 使用場景:當class和style屬性需要根據(jù)組件的da

    2024年02月10日
    瀏覽(32)
  • class與 style綁定

    在Vue中,我們可以通過綁定不同的class來實現(xiàn)對元素的樣式操作。Vue提供了多種方式來綁定HTML class,包括對象語法、數(shù)組語法以及在組件上使用class屬性。 對象語法允許我們根據(jù)不同的條件來動態(tài)地添加或刪除class。以一個按鈕元素為例,我們可以使用v-bind指令來綁定一個對

    2024年02月15日
    瀏覽(20)
  • 【前端】vue3中引入class類的寫法

    單獨將一個類作為一個js文件,然后引入到vue3頁面使用 使用的vue頁面

    2024年04月13日
    瀏覽(28)
  • vue父子組件之間雙向數(shù)據(jù)綁定的(vue2/vue3)

    vue父子組件之間雙向數(shù)據(jù)綁定的四種方法(vue2/vue3) vue考慮到組件的可維護性,是不允許子組件改變父組件傳的props值的。父組件通過綁定屬性的方式向子組件傳值,而在子組件中可以通過$emit向父組件通信(第一種方式),通過這種間接的方式改變父組件的data,從而實現(xiàn)子組

    2024年02月08日
    瀏覽(89)
  • 【vue2第九章】組件化開發(fā)和根組件以及style上的scoped作用

    【vue2第九章】組件化開發(fā)和根組件以及style上的scoped作用

    組件化開發(fā)和根組件 什么是組件化開發(fā)? 一個頁面可以拆分為多個組件,每個組件有自己的 樣式,結(jié)構(gòu),行為 ,組件化開發(fā)的好處就是,便于維護,利于重復利用,提升開發(fā)的效率。 便于維護 :頁面中塊出了問題,可以直接去找到這個組件,修改組件的樣式邏輯結(jié)構(gòu)。

    2024年02月10日
    瀏覽(102)
  • 關(guān)于vue2與vue3

    關(guān)于vue2與vue3

    vue是組件化開發(fā)框架,所以對于vue應用來說組件間的數(shù)據(jù)通信非常重要。 1. 組件通信常用方式有以下8種: props $emit/ $on $children /$parent $attrs/ $listeners ref $root eventbus vuex 注意vue3中廢棄的幾個API 在vue3中廢除$children 移除$listeners $on、$off和$once實例方法被移除 2.根據(jù)組件之間關(guān)系討

    2024年02月05日
    瀏覽(20)
  • vue3和vue2區(qū)別

    在 Vue 2 中,使用了 Object.defineProperty 來實現(xiàn)數(shù)據(jù)的響應式。它通過逐個定義對象屬性的方式來進行數(shù)據(jù)的劫持和監(jiān)聽。這種方式存在一些限制,例如無法監(jiān)聽新增的屬性,需要使用 Vue 提供的 $set 方法來實現(xiàn)響應式。此外,由于需要逐個定義屬性,對于大型對象或數(shù)組的性能

    2024年01月17日
    瀏覽(21)
  • vue2與vue3的區(qū)別

    引言:本文講的是vue2與vue3的區(qū)別,其實這算是老生常談了,vue3出的時間也很久了,在vue2的基礎上使得整個框架更加的輕便,在企業(yè)中應用vue3的也不少,但是vue2作為經(jīng)典且穩(wěn)定版本也有很多項目在使用,接下來就講講vue2與vue3有哪些區(qū)別。 響應式作為vue關(guān)鍵的特性,vue3在

    2024年02月12日
    瀏覽(20)
  • vue2和vue3的區(qū)別

    Vue 2和Vue 3是Vue.js框架的兩個不同版本,下面是它們之間的一些主要區(qū)別: 性能提升:Vue 3在底層進行了重寫,使用了更高效的編譯器,生成的代碼更小,在運行時有更快的速度和更低的內(nèi)存消耗。 Composition API:Vue 3引入了Composition API,它使得組件邏輯可以更容易地組織和復用

    2024年01月18日
    瀏覽(22)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領取紅包,優(yōu)惠每天領

二維碼1

領取紅包

二維碼2

領紅包