vue 動態(tài)樣式綁定 class/style的寫法小結
更新時間：2023年03月04日 10:27:59 作者：想搞技術
這篇文章主要介紹了vue 動態(tài)樣式綁定 class/style的寫法小結,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
簡介：
綁定樣式：
1、class樣式
寫法：class="xxx" xxx可以是字符串，對象，數(shù)組。
字符串寫法適用于：類名不確定，要動態(tài)獲取。
對象寫法適用于：要綁定多個樣式，個數(shù)確定，名字確定，但不確定用不用。
數(shù)組寫法適用于：要綁定多個樣式，個數(shù)不確定，名字不確定。
2、style樣式
：style="{fonSize : xxx}"其中xxx是動態(tài)值，鍵值要用小駝峰命名法。
：style="[a,b]"其中a，b是樣式對象。
class樣式：
字符串寫法：類名不確定，要動態(tài)獲取
通過v-bind動態(tài)綁定樣式：
//樣式-----------------------------------------
<style>
.basic{
border: 5px solid rgb(77, 191, 252); //邊框
width: 400px; //寬
height: 100px; //高
}
.style1{
border: 5px solid rgb(75, 139, 235); //邊框
background-color: rgb(20, 117, 122); //背景顏色
color: bisque; //字體顏色
}
.style2{
border: 5px solid rgb(182, 219, 131); //邊框
background-color: rgb(222, 171, 203); //背景
color: rgb(16, 23, 29); //字體
border-radius: 10px; //圓角
}
.change1{
background: -webkit-linear-gradient(left,rgb(182, 219, 131),rgb(241, 137, 201)); //漸變背景
}
.change2{
font-size: larger; //大號字體
border-radius: 30px; //圓角
}
</style><div id="gjs">
<h1>字符串方法</h1>
<div class="basic" :class="style">
{{name}} <br>
<button @click="changeStyle">改變樣式</button>
</div>
<hr>
<h1>對象方法</h1>
<div class="basic" :class="styleObj">
{{name}}
<br>
<button @click="changeStyle1">改變樣式</button>
</div>
<hr>
<h1>數(shù)組方法</h1>
<div class="basic" :class="styleArr">
{{name}}
<br>
<button @click="changeStyle2">減少樣式</button>
<button @click="changeStyle3">增加樣式</button>
</div>
<h1>style方法1</h1>
<div class="basic" :style="{fontSize : fsize+'px'}">
{{name}}
</div>
<h1>style方法2</h1>
<div class="basic" :style="fontSize">
{{name}}
</div>
</div><body>
//v-bind簡寫 ： 將樣式style1綁定到div :class="style"-------------------------------------------
<div id="gjs" class="basic" :class="style">{{name}}</div>
<script>
const vm = new Vue({
el: '#gjs',
data:{
name: '搞技術',
//定義類名-可以通過綁定事件更改為其他類名更改樣式-----------------------------------
style: 'style1',
},
})
</script>
</body>
也可以添加按鈕綁定點擊事件改變參數(shù)，點擊按鈕將style的參數(shù)變?yōu)閟tyle2，通過添加判斷實現(xiàn)來回改變樣式
const vm = new Vue({
el: '#gjs',
data:{
name: '搞技術',
style: '',
},
methods: {
changeStyle(){
if (this.style == 'style2') {
this.style = 'style1'
} else {
this.style = 'style2'
}
}}對象寫法：要綁定多個樣式，個數(shù)確定，名字確定，但不確定用不用。
通過點擊按鈕或者控制臺修改對象屬性的值來控制樣式的變化
<script>
const vm = new Vue({
el: '#gjs',
data:{
name: '搞技術',
styleObj:{
change1:false,
change2:false,
}
},
methods: {
changeStyle1(){
if (this.styleObj.change1 == true) {
this.styleObj.change1 = false
this.styleObj.change2 = false
} else {
this.styleObj.change1 = true
this.styleObj.change2 = true
}
}
})
</script>數(shù)組寫法：要綁定多個樣式，個數(shù)不確定，名字不確定。
<script>
const vm = new Vue({
el: '#gjs',
data:{
name: '搞技術',
styleArr:['change1','change2'],
},
methods: {
changeStyle2(){
this.styleArr.shift()
},
changeStyle3(){
this.styleArr.unshift('change1')
}
}
})
</script>通過綁定事件對數(shù)組中的值進行修改，點擊減少則移除數(shù)組中的值，點擊添加則給數(shù)組中添加值來控制樣式的變化
所以背景顏色消失
style方法 （鍵值要用小駝峰命名法）
//
<h1>style方法1</h1>
<div class="basic" :style="{fontSize : fsize+'px'}"> //這里的fontSize小駝峰
{{name}}
</div>
<h1>style方法2</h1>
<div class="basic" :style="fontSize">
{{name}}
</div> <script>
const vm = new Vue({
el: '#gjs',
data:{
name: '搞技術',
fsize:40, //方法1
fontSize:{
fontSize:'40px',
}, //方法2這里的fontSize小駝峰
}
})
</script>
到此這篇關于vue 動態(tài)樣式綁定 class/style的寫法小結的文章就介紹到這了,更多相關vue 動態(tài)樣式綁定 class和style內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
在現(xiàn)代?Web?應用中,Tab?頁簽功能是非常常見的一種交互模式,它可以幫助用戶在不同的視圖間快速切換,而不會丟失當前視圖的狀態(tài),本文將介紹如何在?Vue?項目中實現(xiàn)一個帶有緩存功能的?Tab?頁簽功能,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了Vue使用正則校驗文本框為正整數(shù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
VUE異步更新DOM - 用$nextTick解決DOM視圖的問題
這篇文章主要介紹了VUE異步更新DOM - 用$nextTick解決DOM視圖的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
本文主要介紹了vue3實現(xiàn)多層級列表的項目實踐，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
Element-UI 多個el-upload組件自定義上傳不用上傳url并且攜帶自定義傳參(文件序號)
有多個upload組件,每個都需要單獨上傳獲取文件（JS File類型）,不需要action上傳到指定url,自定義上傳動作和http操作,下面通過本文給大家分享Element-UI 多個el-upload組件自定義上傳不用上傳url并且攜帶自定義傳參(文件序號),感興趣的朋友一起看看吧2024-06-06
傳統(tǒng)的表單開發(fā)通常需要編寫大量的重復代碼,例如處理用戶輸入、驗證數(shù)據(jù)、更新 UI 等等,為了簡化開發(fā),我們可以借助 Vue 3 的新特性,例如組合式 API 和 ref 對象,所以本文我們將一起學習如何使用 Vue 3 的新特性構建一個更加靈活、可擴展的動態(tài)表單2024-06-06
這篇文章主要為大家詳細介紹了vue實現(xiàn)記事本功能，記事本可以進行添加刪除事件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
在Vue項目中,通過使用vue-print-nb插件,可以實現(xiàn)頁面的打印功能,這篇文章主要介紹了vue項目純前端實現(xiàn)的模板打印功能的相關資料,需要的朋友可以參考下2024-10-10
vue.js動態(tài)修改background-image問題
這篇文章主要介紹了vue.js動態(tài)修改background-image問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
在開發(fā)webapp的時候總是會受到首屏加載時間過長的影響，越來越多的APP采用了“骨架屏”的方式去提升用戶體驗。這篇文章主要介紹了Vue頁面骨架屏的實現(xiàn)方法,感興趣的小伙伴們可以參考一下2018-05-05