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 相关文章推荐
收集json解析的四种方法分享
Jan 17 Javascript
avalon js实现仿微博拖动图片排序
Aug 14 Javascript
JS+CSS相对定位实现的下拉菜单
Oct 06 Javascript
JavaScript实现数据类型的相互转换
Mar 06 Javascript
第九篇Bootstrap导航菜单创建步骤详解
Jun 21 Javascript
深入理解React中es6创建组件this的方法
Aug 29 Javascript
基于JavaScript实现滑动门效果
Mar 16 Javascript
js 只比较时间大小的实例
Oct 26 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
Oct 26 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
Apr 26 Javascript
JS访问对象两种方式区别解析
Aug 29 Javascript
小程序中手机号识别的示例
Dec 14 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
第三节--定义一个类
2006/11/16 PHP
探讨:如何使用PhpDocumentor生成文档
2013/06/25 PHP
CI框架AR操作(数组形式)实现插入多条sql数据的方法
2016/05/18 PHP
php简单压缩css样式示例
2016/09/22 PHP
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
2011/09/26 Javascript
IE中的File域无法清空使用jQuery重设File域
2014/04/24 Javascript
javascript封装简单实现方法
2015/08/11 Javascript
Bootstrap 组件之按钮(二)
2016/05/11 Javascript
jQuery EasyUI Tab 选项卡问题小结
2016/08/16 Javascript
Bootstrap模态框案例解析
2017/03/05 Javascript
Vue实现virtual-dom的原理简析
2017/07/10 Javascript
Javascript中Promise的四种常用方法总结
2017/07/14 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
2020/04/08 Javascript
Python基于list的append和pop方法实现堆栈与队列功能示例
2017/07/24 Python
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
浅谈pandas中shift和diff函数关系
2018/04/08 Python
详解Django rest_framework实现RESTful API
2018/05/24 Python
pandas 使用均值填充缺失值列的小技巧分享
2019/07/04 Python
python opencv图片编码为h264文件的实例
2019/12/12 Python
Python request操作步骤及代码实例
2020/04/13 Python
python suds访问webservice服务实现
2020/06/26 Python
CSS3制作半透明边框(Facebox)类似渐变
2012/12/09 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
2018/01/31 HTML / CSS
某IT外企面试题-二分法求方程!看看大家的C++功底
2015/07/04 面试题
军训 自我鉴定
2014/02/03 职场文书
研究生考核个人自我鉴定
2014/03/27 职场文书
社区维稳工作方案
2014/06/06 职场文书
企业员工爱岗敬业演讲稿
2014/08/26 职场文书
竞选纪律委员演讲稿
2014/09/13 职场文书
2014年政务公开工作总结
2014/12/09 职场文书
幼儿园个人师德总结
2015/02/06 职场文书
惊天动地观后感
2015/06/10 职场文书
美容院管理规章制度
2015/08/05 职场文书
2019年年中工作总结讲话稿模板
2019/03/25 职场文书
血轮眼轮回眼特效 html+css
2021/03/31 HTML / CSS
深入理解redis中multi与pipeline
2021/06/02 Redis