Vue的樣式綁定詳解
更新時間：2022年02月24日 16:28:21 作者：Tree_wws
這篇文章主要為大家詳細介紹了Vue的樣式綁定，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
1. 樣式綁定（class、style）
1.1 綁定class
固定的類名就正常的寫，需要動態(tài)綁定的類名就v-bind去綁定它
例如：:class= "mood"
下面舉一些適用的場景：
1.綁定class樣式—字符串寫法，適用于：樣式的類名不確定，需要動態(tài)指定
2.綁定class樣式 — 數(shù)組寫法使用的場景 ：綁定的樣式的個數(shù)不確定，名字也不確定
3.綁定class樣式 — 對象寫法使用的場景：綁定的個數(shù)確定的，名字也確定，不確定的是用不用該類名
<body>
<style>
.basic {
width: 100px;
height: 100px;
border: 2px solid black;
}
.happy {
width: 100px;
height: 100px;
border: 2px solid orange;
background-color: palevioletred;
}
.sad {
width: 100px;
height: 100px;
border: 2px solid black;
background-color: silver;
}
.normal {
width: 100px;
height: 100px;
border: 2px solid greenyellow;
background-color: sandybrown;
}
.outline {
border-radius: 20%;
}
.color {
color: skyblue;
}
.size {
font-family: '微軟雅黑';
font-size: 20px;
font-weight: bold;
}
</style>
<div id="root">
<!--
需求1 ：點擊div1 隨機切換mood
綁定class樣式 --- 字符串寫法
1. 固定的class類名就正常寫，需要動態(tài)指定的class類名就 :class="xxx" 寫到這里面
2. 使用的場景 : 樣式的類名不確定，需要去動態(tài)指定
-->
<div class="div1 basic" :class="mood" @click="random">{{name}}</div>
<!--
需求2 ： 點擊div2 添加類,或者刪除類
綁定class樣式 --- 數(shù)組寫法
1. 使用的場景 ：綁定的樣式的個數(shù)不確定，名字也不確定
2. shift() ：移除數(shù)組中第一個數(shù)據(jù)， push("xxx")；在末尾添加一個新的數(shù)據(jù)
-->
<div class="div2 basic" :class="classArr" @click = "remove">{{name}}</div>
<!-- 注意點：在vue操作下 " " 里面的寫的字符串是表達式，" '' " 里面寫的字符串就是值 -->
<!-- <div class="div2 basic" :class="['outline','color','size']"></div> -->
<!--
需求3 ：在outline和color之間進行切換
綁定class樣式 --- 對象寫法
使用的場景：綁定的個數(shù)確定的，名字也確定，不確定的是用不用該類名
-->
<div class="div3 basic" :class="classObj" @click="change">{{name}}</div>
</div>
<script>
Vue.config.productionTip = false
let vm = new Vue({
el: '#root',
data: {
name: "Hello,Vue!",
mood: "normal",
classArr:['outline','color','size'],
classObj:{
outline:true,
color:true
}
},
methods: {
random() {
let arr = ["happy", "sad", "normal"]
// Math.floor : 表示向下取整, Math.random()：取值是0-1，1是取不到的
this.mood = arr[Math.floor(Math.random() * 3)]
},
remove(){
this.classArr.shift()
},
change(){
vm.classObj.color = !vm.classObj.color
vm.classObj.outline = !vm.classObj.outline
}
}
})
</script>
1.2 綁定style
例如：:style = "styleobj"
<div id="root" :style="styleobj">
Hello,{{name}}!
</div>
<script>
Vue.config.productionTip = false
let vm = new Vue({
el: '#root',
data: {
name:"Vue",
styleobj:{
fontSize: 50 + "px",
color: "red",
border:1+"px"+" "+"solid"+" "+"black"
}
}
})
</script>
總結
本篇文章就到這里了，介紹了class和style如何綁定，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內容!
相關文章
在Vue項目中，我們經常需要引入外部的模塊或文件，這時候就會用到import和require這兩個關鍵字，本文將詳細分析它們的用法，并提供具體的代碼實例和解釋,需要的朋友可以參考下2023-06-06
這篇文章的主題是vue-cli的理解?；蛟S，很多人在開發(fā)vue的時候，我們會發(fā)現(xiàn)一個問題——只會去用，而不明白它的里面的東西?，F(xiàn)在的框架可以說是足夠的優(yōu)秀，讓開發(fā)者不用為搭建開發(fā)環(huán)境而煩惱。但是有時候，我們還是得回到原始生活體驗一下，才能夠讓自己更上層樓。2017-12-12
Vue3的Composition API是一個全新的API，它允許開發(fā)人員將Vue組件中的邏輯封裝在單獨的功能性組合中，而不是依賴于Vue選項對象。這篇文章將深入探討Vue3的Composition API及其使用方法,需要的朋友可以參考下2023-07-07
vue中的事件修飾符once,prevent,stop,capture,self,passive
這篇文章主要介紹了vue中的事件修飾符once,prevent,stop,capture,self,passive，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue中項目頁面空白但不報錯產生的原因及分析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
解決vue watch數(shù)據(jù)的方法被調用了兩次的問題
這篇文章主要介紹了解決vue watch數(shù)據(jù)的方法被調用了兩次的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
最近開發(fā)了一個功能,頁面首頁會加載大量的圖片,初次進入頁面時,會導致頁面性能下降,于是乎,我改進了這個功能,可以讓所有圖片自動懶加載,文中有詳細的代碼示例,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Vue如何引入全局過濾器問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了淺談VUE中演示v-for為什么要加key，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01
這篇文章主要介紹了Vue之Dep和Observer的用法及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05