Vue綁定class和綁定內(nèi)聯(lián)樣式的實(shí)現(xiàn)方法
綁定class
方式一：
對(duì)象語(yǔ)法：給 v-bind:class傳 一個(gè)對(duì)象，以動(dòng)態(tài)地切換 class
當(dāng)對(duì)象中某key對(duì)應(yīng)的值為true時(shí)，該key做為className被添加到標(biāo)簽上
.box {
width: 100px;
height: 100px;
background-color: gray;
}
.circle {
border-radius: 50%;
}
<div id="app">
<div class="box" @click="isCircle = !isCircle" :class="{circle:isCircle}"></div>
<!--當(dāng)isCircle為true時(shí)，該div的class名多加一個(gè)circle-->
<p>{{isCircle}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
isCircle: false
}
})
</script>
初始化時(shí)box為方形，點(diǎn)擊時(shí)切換成圓形，再次點(diǎn)擊，切換成方形，以此類推
:class="{circle:isCircle}"還可以寫到計(jì)算屬性computed里，return這個(gè)對(duì)象
<div class="box" @click="isCircle = !isCircle" :class="divChange"></div>
computed:{
divChange:function(){
return {circle:this.isCircle}
}
}
方式二：
數(shù)組語(yǔ)法：把一個(gè)數(shù)組傳給 v-bind:class，以應(yīng)用一個(gè) class 列表
css多加一個(gè)藍(lán)色背景的效果：
.blue {
background-color: blue;
}
<div id="app">
<div class="box" v-on:click="clickFun()" :class="[color,divChange()]"></div>
<p>{{isCircle}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
isCircle: false,
color:""
},
methods:{
divChange: function(){
return {circle:this.isCircle}
},
clickFun: function(){
this.isCircle = !this.isCircle;
if (this.isCircle){
this.color = "blue"
}else{
this.color = ""
}
}
}
})
</script>
綁定內(nèi)聯(lián)樣式
綁定內(nèi)聯(lián)樣式同樣可以用對(duì)象語(yǔ)法或數(shù)組語(yǔ)法，此處用對(duì)象語(yǔ)法和計(jì)算屬性結(jié)合的方法實(shí)例：
<div id="app">
<!--綁定內(nèi)聯(lián)樣式-->
<div class="box" v-on:click="clickFun()" :style="divStyle"></div>
<p>{{isCircle}}</p>
</div>
divStyle：
divStyle: function(){
return {
backgroundColor:this.color
}
}
這樣就可以將想要的顏色設(shè)置到.box上了
小demo：
1.點(diǎn)擊box時(shí)，切換圓形和方形 ——內(nèi)聯(lián)樣式綁定
2.初始box顏色為紅色，點(diǎn)擊開(kāi)始按鈕，每隔一秒切換顏色（紅/藍(lán)），再次點(diǎn)擊按鈕后取消顏色切換 —— class綁定
.box {
width: 100px;
height: 100px;
background-color: red;
}
.blue {
background-color: blue;
}
<div id="app">
<div class="box" :style="borderRadius" @click="changeStyle" :class="{blue: isBlue}"></div>
<button @click="startClick">開(kāi)始</button>
</div>
new Vue({
el: "#app",
data: {
isCircle: false,
borderRadius: { borderRadius: "50%" },
isStart: false,
isBlue: false,
timer: null
},
methods: {
changeStyle: function () {
if (this.borderRadius.borderRadius == "0%") {
this.borderRadius.borderRadius = "50%"
} else {
this.borderRadius.borderRadius = "0%"
}
},
startClick: function () {
this.isStart = !this.isStart;
}
},
watch: {
isStart: function (val) {
var vm = this;
if (val) {
console.log("開(kāi)啟顏色切換")
this.timer = setInterval(function () {
vm.isBlue = !vm.isBlue
}, 1000)
}else{
console.log("取消計(jì)時(shí)器，停止顏色切換")
clearInterval(this.timer);
this.timer = null;
}
}
}
})
效果：
到此這篇關(guān)于Vue綁定class和綁定內(nèi)聯(lián)樣式的實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)Vue綁定class和綁定內(nèi)聯(lián)樣式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在nginx上部署vue項(xiàng)目(history模式)的方法
vue-router 默認(rèn)是hash模式，使用url的hash來(lái)模擬一個(gè)完整的url，當(dāng)url改變的時(shí)候，頁(yè)面不會(huì)重新加載。這篇文章主要介紹了在nginx上部署vue項(xiàng)目(history模式),需要的朋友可以參考下2017-12-12
Vue3+Canvas實(shí)現(xiàn)簡(jiǎn)易的貪吃蛇游戲
貪吃蛇作為一個(gè)經(jīng)典的小游戲，是很多人兒時(shí)的記憶，當(dāng)時(shí)的掌機(jī)、諾基亞手機(jī)里面都有它的身影。本文將用Vue3?Canvas來(lái)復(fù)刻一下這款游戲，感興趣的可以了解一下2022-07-07
Vue生命周期和鉤子函數(shù)的詳解與經(jīng)典面試題
Vue生命周期是指vue實(shí)例對(duì)象從創(chuàng)建之初到銷毀的過(guò)程,vue所有功能的實(shí)現(xiàn)都是圍繞其生命周期進(jìn)行的,下面這篇文章主要給大家介紹了關(guān)于Vue生命周期和鉤子函數(shù)的相關(guān)資料,需要的朋友可以參考下2021-10-10
通過(guò)Vuex共享數(shù)據(jù),官方給出的跨多組件傳遞數(shù)據(jù)的解決方案,下面這篇文章主要給大家介紹了關(guān)于vue組件之間傳值的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
這篇文章主要介紹了Vue自定義指令及使用，對(duì)Vue感興趣的同學(xué)，可以參考下2021-05-05
vue使用video插件vue-video-player的示例
這篇文章主要介紹了vue使用video插件vue-video-player的示例，幫助大家更好的理解和使用vue插件，感興趣的朋友可以了解下2020-10-10
在使用vue框架的過(guò)程中,我們經(jīng)常需要給一些數(shù)據(jù)做一些初始化處理,這時(shí)候我們常用的就是在created與mounted選項(xiàng)中作出處理,這篇文章主要給大家介紹了關(guān)于Vue中created與mounted區(qū)別的相關(guān)資料,其中部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的,需要的朋友可以參考下2022-06-06
今天小編就為大家分享一篇vue 中固定導(dǎo)航欄的實(shí)例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
vue-cli構(gòu)建的項(xiàng)目如何手動(dòng)添加eslint配置
這篇文章主要介紹了vue-cli構(gòu)建的項(xiàng)目如何手動(dòng)添加eslint配置，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue如何判斷dom的class,vue點(diǎn)擊給dom添加class然后獲取含有class的dom文件，具體內(nèi)容詳情大家參考下本文2018-04-04