本篇為個人筆記
1.對于class類的綁定的區(qū)別
vue2:對于vue2而言,所有類的綁定都是基于對象{}來進行的
例如:單個類綁定
<div :class="{active:isActive}"></div>
多個類綁定:
<div :class="{active,hasError,test1,test2,me:isMe}"></div>
?
?vue3:vue3的類綁定是基于數(shù)組[]來進行的
例如:單個綁定
<div :class="[isActive?'active':'']"></div>
?多個綁定文章來源:http://www.zghlxwxcb.cn/news/detail-603358.html
<div :class="['a','b','c',IsError?'hasError':'',IsMe?'d':'e']"></div>
文章來源地址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)!