Vue之綁定class樣式與style樣式方式
1.回顧HTML的class屬性
答：任何一個HTML標簽都能夠具有class屬性，這個屬性可能只有一個值，如class="happs"，也有可能存在多個屬性值，如class="happs good blue"，js的原生DOM針對第二種多個屬性值的使用了偽數(shù)組進行引用，即classlist，另外也有一個屬性classname返回一陣個字符串。
因此，Vue可以修改其接管的dom節(jié)點的HTML代碼里面標簽的class屬性，進而達到一些目的，比如修改樣式等。
2.Vue輸入修改class的屬性？
答：使用v-bind指令即可修改class屬性值，如:class="value"。
此外，value也可以是一個數(shù)組，如
class="classArr"，classArr=["s1","s2","s3"]
也可以是一個對象
class="classObj"，classObj={"s1":Ture,"s2":Ture,"s3":Ture}
3.Vue修改style內(nèi)聯(lián)樣式？
答：因為style的屬性值是一串鍵值對形式的字符串，所以使用v-bind進行修改屬性時，必須以屬性的形式進行修改，如:style="{fontSzie:100+"px"}" ，而且這里面的鍵不能亂寫，必須是合法的HTML中的style屬性名稱，的小駝峰寫法，比如backgroundColor="xx"。
4.v-show指令？
答：v-show指令用于控制HTML標簽的顯示與隱藏，他的屬性值必須是一個布爾值。
當表達式的值為 true 時，display 屬性被設(shè)置為原來的值（比如 block、inline、flex 等），元素顯示出來；當表達式的值為 false 時，display 屬性被設(shè)置為 none，元素隱藏起來。
一般用法：<h1 v-show=”true“>。
5.v-if指令？
答：用于控制元素是否出現(xiàn)在DOM樹之中。
6.v-if，v-else-if，v-else指令？
答：與js代碼一致，但是每一行必須連貫，不能中斷，作用就是按照條件選擇指定的元素進行顯示。
7.<template> 偽標簽？？
答：該標簽是Vue指定的偽標簽，用于容納一系列HTML元素，類似于DIV，最終會被Vue解析到HTML文檔當中。
他只能與v-if指令搭配，用于決定這部分頁面要不要進行渲染到網(wǎng)頁。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue3 component is 不顯示的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue ElementUI的from表單實現(xiàn)登錄效果的示例
本文主要介紹了vue ElementUI的from表單實現(xiàn)登錄效果的示例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
html和vue都是前端技術(shù)中非常重要的一部分,其中html是web開發(fā)的基石,而vue則是現(xiàn)代化的前端開發(fā)框架之一,下面這篇文章主要給大家介紹了關(guān)于如何將HTML頁面改寫到vue項目中的相關(guān)資料,需要的朋友可以參考下2024-08-08
本文主要介紹了如何在vuejs項目中使用md5加密密碼的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
隨著vue3.4版本的發(fā)布,defineModel也正式轉(zhuǎn)正了,它可以簡化父子組件之間的雙向綁定,是目前官方推薦的雙向綁定實現(xiàn)方式,下面就跟隨小編一起深入了解一下defineModel的使用吧2024-02-02
Vue提供了一種稱為函數(shù)式組件的組件類型,用來定義那些沒有響應(yīng)數(shù)據(jù),也不需要有任何生命周期的場景,它只接受一些props來顯示組件,下面這篇文章主要給大家介紹了關(guān)于Vue高級組件之函數(shù)式組件的使用場景與源碼分析的相關(guān)資料,需要的朋友可以參考下2021-11-11
這篇文章主要介紹了Vue3之 頁面,菜單,路由的使用，文章圍繞Vue3頁面,菜單,路由相關(guān)資料展開詳細內(nèi)容,需要的朋友可以參考一下2021-11-11
這篇文章主要給大家介紹了關(guān)于vue3如何通過ref獲取元素離頂部的距離,文中通過代碼以及圖文介紹的非常詳細,對大家學(xué)習(xí)或者使用vue3具有一定的參考借鑒價值,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了vue中選中多個選項并且改變選中的樣式，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-09-09
這篇文章主要介紹了vuex如何修改狀態(tài)state的方法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08