溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細(xì)介紹“vue動(dòng)態(tài)樣式綁定class/style怎么寫(xiě)”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“vue動(dòng)態(tài)樣式綁定class/style怎么寫(xiě)”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。
綁定樣式：
1、class樣式
寫(xiě)法：class="xxx" xxx可以是字符串，對(duì)象，數(shù)組。
字符串寫(xiě)法適用于：類(lèi)名不確定，要?jiǎng)討B(tài)獲取。
對(duì)象寫(xiě)法適用于：要綁定多個(gè)樣式，個(gè)數(shù)確定，名字確定，但不確定用不用。
數(shù)組寫(xiě)法適用于：要綁定多個(gè)樣式，個(gè)數(shù)不確定，名字不確定。
2、style樣式
：style="{fonSize : xxx}"其中xxx是動(dòng)態(tài)值，鍵值要用小駝峰命名法。
：style="[a,b]"其中a，b是樣式對(duì)象。
class樣式：
通過(guò)v-bind動(dòng)態(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; //大號(hào)字體
border-radius: 30px; //圓角
}
</style><div id="gjs">
<h2>字符串方法</h2>
<div class="basic" :class="style">
{{name}} <br>
<button @click="changeStyle">改變樣式</button>
</div>
<hr>
<h2>對(duì)象方法</h2>
<div class="basic" :class="styleObj">
{{name}}
<br>
<button @click="changeStyle1">改變樣式</button>
</div>
<hr>
<h2>數(shù)組方法</h2>
<div class="basic" :class="styleArr">
{{name}}
<br>
<button @click="changeStyle2">減少樣式</button>
<button @click="changeStyle3">增加樣式</button>
</div>
<h2>style方法1</h2>
<div class="basic" :>
{{name}}
</div>
<h2>style方法2</h2>
<div class="basic" :>
{{name}}
</div>
</div><body>
//v-bind簡(jiǎn)寫(xiě) ： 將樣式style1綁定到div :class="style"-------------------------------------------
<div id="gjs" class="basic" :class="style">{{name}}</div>
<script>
const vm = new Vue({
el: '#gjs',
data:{
name: '搞技術(shù)',
//定義類(lèi)名-可以通過(guò)綁定事件更改為其他類(lèi)名更改樣式-----------------------------------
style: 'style1',
},
})
</script>
</body>
也可以添加按鈕綁定點(diǎn)擊事件改變參數(shù)，點(diǎn)擊按鈕將style的參數(shù)變?yōu)閟tyle2，通過(guò)添加判斷實(shí)現(xiàn)來(lái)回改變樣式
const vm = new Vue({
el: '#gjs',
data:{
name: '搞技術(shù)',
style: '',
},
methods: {
changeStyle(){
if (this.style == 'style2') {
this.style = 'style1'
} else {
this.style = 'style2'
}
}}
通過(guò)點(diǎn)擊按鈕或者控制臺(tái)修改對(duì)象屬性的值來(lái)控制樣式的變化
<script>
const vm = new Vue({
el: '#gjs',
data:{
name: '搞技術(shù)',
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>
<script>
const vm = new Vue({
el: '#gjs',
data:{
name: '搞技術(shù)',
styleArr:['change1','change2'],
},
methods: {
changeStyle2(){
this.styleArr.shift()
},
changeStyle3(){
this.styleArr.unshift('change1')
}
}
})
</script>通過(guò)綁定事件對(duì)數(shù)組中的值進(jìn)行修改，點(diǎn)擊減少則移除數(shù)組中的值，點(diǎn)擊添加則給數(shù)組中添加值來(lái)控制樣式的變化
所以背景顏色消失
//
<h2>style方法1</h2>
<div class="basic" :> //這里的fontSize小駝峰
{{name}}
</div>
<h2>style方法2</h2>
<div class="basic" :>
{{name}}
</div> <script>
const vm = new Vue({
el: '#gjs',
data:{
name: '搞技術(shù)',
fsize:40, //方法1
fontSize:{
fontSize:'40px',
}, //方法2這里的fontSize小駝峰
}
})
</script>
讀到這里，這篇“vue動(dòng)態(tài)樣式綁定class/style怎么寫(xiě)”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼