Vue之綁定class樣式與style樣式方式
1.回顧HTML的class屬性
答：任何一個HTML標(biāo)簽都能夠具有class屬性，這個屬性可能只有一個值，如class="happs"，也有可能存在多個屬性值，如class="happs good blue"，js的原生DOM針對第二種多個屬性值的使用了偽數(shù)組進行引用，即classlist，另外也有一個屬性classname返回一陣個字符串。
因此，Vue可以修改其接管的dom節(jié)點的HTML代碼里面標(biāo)簽的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標(biāo)簽的顯示與隱藏，他的屬性值必須是一個布爾值。
當(dāng)表達式的值為 true 時，display 屬性被設(shè)置為原來的值（比如 block、inline、flex 等），元素顯示出來；當(dāng)表達式的值為 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> 偽標(biāo)簽？？
答：該標(biāo)簽是Vue指定的偽標(biāo)簽，用于容納一系列HTML元素，類似于DIV，最終會被Vue解析到HTML文檔當(dāng)中。
他只能與v-if指令搭配，用于決定這部分頁面要不要進行渲染到網(wǎng)頁。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue-devtools 是一款基于chrome游覽器的插件，用于調(diào)試vue應(yīng)用，這篇文章分步驟給大家介紹了vue-devtools的安裝方法，需要的朋友參考下吧2018-04-04
這篇文章主要給大家介紹了關(guān)于vue升降版本以及如何查看項目版本的相關(guān)資料,在開發(fā)和維護Vue.js應(yīng)用程序時了解所使用的Vue.js版本非常重要,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-12-12
vue3如何使用postcss-px-to-viewport適配屏幕
這篇文章主要介紹了vue3如何使用postcss-px-to-viewport適配屏幕問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
model在vue里面實現(xiàn)雙向綁定,通過父節(jié)點向子節(jié)點傳遞參數(shù),子節(jié)點通過操作再回傳給父節(jié)點的變量,有點像prop和$emit組合使用,下面這篇文章主要給大家介紹了關(guān)于Vue3中v-model的相關(guān)資料,需要的朋友可以參考下2022-11-11
什么是vue.js事件處理器？這篇文章主要介紹了vue.js事件處理器的相關(guān)資料2017-03-03
紅包也叫壓歲錢，是過農(nóng)歷春節(jié)時長輩給小孩兒用紅紙包裹的禮金。本文將通過Vue制作一個紅包雨小游戲，文中的示例代碼講解詳細，需要的可以參考一下2022-01-01
這篇文章主要介紹了vue組件掛載到全局方法的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
vue的template模板是如何轉(zhuǎn)為render函數(shù)的過程
Vue從template到render函數(shù)的轉(zhuǎn)換經(jīng)歷模板解析、AST構(gòu)建、優(yōu)化、生成渲染函數(shù)等步驟,首先進行詞法分析將模板拆解為tokens,再進行語法分析構(gòu)建AST,然后對AST進行靜態(tài)標(biāo)記和提升優(yōu)化,最后轉(zhuǎn)換成JavaScript渲染函數(shù),生成虛擬DOM,完成組件的渲染和更新,實現(xiàn)了模板的高效轉(zhuǎn)化2024-10-10
Vue一個動態(tài)添加background-image的實現(xiàn)
這篇文章主要介紹了Vue一個動態(tài)添加background-image的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue3的Composition API是一個全新的API，它允許開發(fā)人員將Vue組件中的邏輯封裝在單獨的功能性組合中，而不是依賴于Vue選項對象。這篇文章將深入探討Vue3的Composition API及其使用方法,需要的朋友可以參考下2023-07-07