vue toggle做一个点击切换class(实例讲解)


Posted in Javascript onMarch 13, 2018

实例如下所示:

<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(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript定义类或函数的几种方式小结
Jan 09 Javascript
JQuery+JS实现仿百度搜索结果中关键字变色效果
Aug 02 Javascript
自己用jQuery写了一个图片的马赛克消失效果
May 04 Javascript
js打开windows上的可执行文件示例
May 27 Javascript
windows8.1+iis8.5下安装node.js开发环境
Dec 12 Javascript
JS解析XML文件和XML字符串详解
Apr 17 Javascript
vue双花括号的使用方法 附练习题
Nov 07 Javascript
详解webpack运行Babel教程
Jun 13 Javascript
教你如何编写Vue.js的单元测试的方法
Oct 17 Javascript
微信小程序自定义导航栏(模板化)
Nov 15 Javascript
详解js中的几种常用设计模式
Jul 16 Javascript
js实现3D旋转效果
Aug 18 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
Mar 13 #Javascript
vue2.0 实现页面导航提示引导的方法
Mar 13 #Javascript
vue2.0 根据状态值进行样式的改变展示方法
Mar 13 #Javascript
使用Vuex实现一个笔记应用的方法
Mar 13 #Javascript
基于Axios 常用的请求方法别名(详解)
Mar 13 #Javascript
Bootstrap 中data-[*] 属性的整理
Mar 13 #Javascript
JS实现的集合去重,交集,并集,差集功能示例
Mar 13 #Javascript
You might like
php实现网页缓存的工具类分享
2015/07/14 PHP
PHP实现的曲线统计图表示例
2016/11/10 PHP
PHP实现添加购物车功能
2017/03/06 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
Flash对联广告的关闭按钮讨论
2007/01/30 Javascript
用Div仿showModalDialog模式菜单的效果的代码
2007/03/05 Javascript
js获得网页背景色和字体色的方法
2014/03/21 Javascript
Javascript中设置默认参数值示例
2014/09/11 Javascript
jquery通过closest选择器修改上级元素的方法
2015/03/17 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
2015/04/26 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
2016/06/24 Javascript
js检查是否关闭浏览器的方法
2016/08/02 Javascript
微信小程序 http请求详细介绍
2016/10/09 Javascript
JavaScript数据结构链表知识详解
2016/11/21 Javascript
微信小程序 label 组件详解及简单实例
2017/01/10 Javascript
关于axios返回空对象的问题解决
2017/04/04 Javascript
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
2021/02/20 Vue.js
python Django模板的使用方法(图文)
2013/11/04 Python
python如何实现远程控制电脑(结合微信)
2015/12/21 Python
基于python yield机制的异步操作同步化编程模型
2016/03/18 Python
使用python在本地电脑上快速处理数据
2017/06/22 Python
在Python中调用Ping命令,批量IP的方法
2019/01/26 Python
idea2020手动安装python插件的实现方法
2020/07/17 Python
adidas菲律宾官网:adidas PH
2020/02/07 全球购物
毕业生幼师求职自荐信
2013/10/01 职场文书
金融行业职业生涯规划范文
2014/01/17 职场文书
会计专业应届生自荐信
2014/02/07 职场文书
春节联欢晚会主持词范文
2014/03/24 职场文书
二年级班级文化建设方案
2014/05/10 职场文书
小学母亲节活动总结
2015/02/10 职场文书
导游词之台湾安平古堡
2019/12/25 职场文书
使用canvas实现雪花飘动效果的示例代码
2021/03/30 HTML / CSS
用Python爬虫破解滑动验证码的案例解析
2021/05/06 Python
关于python爬虫应用urllib库作用分析
2021/09/04 Python
Redis集群节点通信过程/原理流程分析
2022/03/18 Redis