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(實例講解)就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
vue通過子組件修改父組件prop的多種實現(xiàn)方式
這篇文章主要介紹了vue通過子組件修改父組件prop的幾種實現(xiàn)方式,比較常用的方式是通過Prop單向傳遞的規(guī)則,需要的朋友可以參考下2021-09-09Vue?axios和vue-axios的關系及使用區(qū)別
axios是基于promise的HTTP庫,可以使用在瀏覽器和node.js中,它不是vue的第三方插件,vue-axios是axios集成到Vue.js的小包裝器,可以像插件一樣安裝使用:Vue.use(VueAxios, axios),本文給大家介紹Vue?axios和vue-axios關系,感興趣的朋友一起看看吧2022-08-08vue-element-admin后臺生成動態(tài)路由及菜單方法詳解
vue-element-admin后臺管理系統(tǒng)模板框架 是vue結合element-ui一體的管理系統(tǒng)框架,下面這篇文章主要給大家介紹了關于vue-element-admin后臺生成動態(tài)路由及菜單的相關資料,需要的朋友可以參考下2023-09-09Vue.js使用computed屬性實現(xiàn)數據自動更新
在Vue組件中,computed屬性是在組件的選項對象中聲明的,你可以把它們想象成組件的一個小功能,告訴Vue當某些數據變化時,如何更新界面,本文給大家介紹了Vue.js使用computed屬性實現(xiàn)數據自動更新,需要的朋友可以參考下2024-06-06