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