vue toggle做一個(gè)點(diǎn)擊切換class(實(shí)例講解)
更新時(shí)間：2018年03月13日 15:58:45 作者：longzhoufeng
下面小編就為大家分享一篇使用vue toggle實(shí)現(xiàn)點(diǎn)擊切換class的示例。具有很好的參考價(jià)值。希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
實(shí)例如下所示：
<template>
<div>
<span :class="{'bg-primary text-danger':isA,'bg-success text-white':!isA}" @click="toggle()">AAAAA</span>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
isA: false
}
},
methods:{
toggle:function () {
this.isA=!this.isA
}
}
}
</script>
<style scoped>
@import "../../../src/assets/plugin/bootstrap-4.0.0-alpha.6-dist/css/bootstrap.css";
</style>
以上這篇vue toggle做一個(gè)點(diǎn)擊切換class(實(shí)例講解)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue通過(guò)子組件修改父組件prop的多種實(shí)現(xiàn)方式
這篇文章主要介紹了vue通過(guò)子組件修改父組件prop的幾種實(shí)現(xiàn)方式,比較常用的方式是通過(guò)Prop單向傳遞的規(guī)則，需要的朋友可以參考下2021-09-09
Vue?axios和vue-axios的關(guān)系及使用區(qū)別
axios是基于promise的HTTP庫(kù)，可以使用在瀏覽器和node.js中，它不是vue的第三方插件，vue-axios是axios集成到Vue.js的小包裝器，可以像插件一樣安裝使用:Vue.use(VueAxios, axios)，本文給大家介紹Vue?axios和vue-axios關(guān)系，感興趣的朋友一起看看吧2022-08-08
這篇文章主要介紹了Vue整合AdminLTE模板的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
vue3 Teleport瞬間移動(dòng)函數(shù)使用方法詳解
這篇文章主要為大家詳細(xì)介紹了vue3 Teleport瞬間移動(dòng)函數(shù)使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
這篇文章主要為大家詳細(xì)介紹了Vue分頁(yè)插件的前后端配置與使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
在Vue3中,我們經(jīng)常會(huì)遇到需要處理列表渲染的情況,Vue3引入了一種新的語(yǔ)法,即#default=“scope”,本文就來(lái)介紹一下Vue3中#default=“scope”的使用,感興趣的可以了解一下2023-10-10
Vue實(shí)現(xiàn)自動(dòng)檢測(cè)以及版本的更新
當(dāng)用戶(hù)在當(dāng)前站點(diǎn)停留時(shí)間比較長(zhǎng)，中途站點(diǎn)進(jìn)行升級(jí)更新之后，用戶(hù)如果不刷新頁(yè)面就任然停留在舊的頁(yè)面里，如何讓用戶(hù)收到一個(gè)提示，引導(dǎo)用戶(hù)進(jìn)行更新操作呢？下面給大家介紹如何站點(diǎn)更新如何在生產(chǎn)環(huán)境提示用戶(hù)更新，進(jìn)行頁(yè)面刷新操作，核心原理其實(shí)很簡(jiǎn)單2023-03-03
這篇文章主要介紹了vue如何使用rem適配，幫助大家處理vue開(kāi)發(fā)移動(dòng)應(yīng)用時(shí)的兼容性問(wèn)題，感興趣的朋友可以了解下2021-02-02
vue-element-admin后臺(tái)生成動(dòng)態(tài)路由及菜單方法詳解
vue-element-admin后臺(tái)管理系統(tǒng)模板框架 是vue結(jié)合element-ui一體的管理系統(tǒng)框架,下面這篇文章主要給大家介紹了關(guān)于vue-element-admin后臺(tái)生成動(dòng)態(tài)路由及菜單的相關(guān)資料,需要的朋友可以參考下2023-09-09
Vue.js使用computed屬性實(shí)現(xiàn)數(shù)據(jù)自動(dòng)更新
在Vue組件中,computed屬性是在組件的選項(xiàng)對(duì)象中聲明的,你可以把它們想象成組件的一個(gè)小功能,告訴Vue當(dāng)某些數(shù)據(jù)變化時(shí),如何更新界面,本文給大家介紹了Vue.js使用computed屬性實(shí)現(xiàn)數(shù)據(jù)自動(dòng)更新,需要的朋友可以參考下2024-06-06