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面向对象之Javascript 继承
May 04 Javascript
js DOM 元素ID就是全局变量
Sep 20 Javascript
javascript定义变量时有var和没有var的区别探讨
Jul 21 Javascript
javascript中的五种基本数据类型
Aug 26 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
Apr 07 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
Jun 06 Javascript
BootStrap CSS全局样式和表格样式源码解析
Jan 20 Javascript
利用forever和pm2部署node.js项目过程
May 10 Javascript
vue双花括号的使用方法 附练习题
Nov 07 Javascript
jQuery实现视频展示效果
May 30 jQuery
vue任意关系组件通信与跨组件监听状态vue-communication
Oct 18 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
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中this,self,parent的区别详解
2013/06/08 PHP
php实现当前页面点击下载文件的简单方法
2016/09/22 PHP
用Move.js配合创建CSS3动画的入门指引
2015/07/22 Javascript
Bootstrap每天必学之按钮(一)
2015/11/24 Javascript
JavaScript构造函数详解
2015/12/27 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
2016/06/07 Javascript
使用 bootstrap modal遇到的问题小结
2016/11/09 Javascript
jQuery 控制文本框自动缩小字体填充
2017/06/16 jQuery
详解用webpack2搭建angular2的项目
2017/06/22 Javascript
用vue构建多页面应用的示例代码
2017/09/20 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
2017/11/08 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
vue项目中跳转到外部链接的实例讲解
2018/09/20 Javascript
vue单页应用在页面刷新时保留状态数据的方法
2018/09/21 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
[01:14]辉夜杯战队访谈宣传片—NEWBEE.Y
2015/12/26 DOTA
Python实现模拟时钟代码推荐
2015/11/08 Python
浅谈Python由__dict__和dir()引发的一些思考
2017/10/30 Python
python利用OpenCV2实现人脸检测
2020/04/16 Python
全面分析Python的优点和缺点
2018/02/07 Python
基于python中theano库的线性回归
2018/08/31 Python
python读取图片任意范围区域
2019/01/23 Python
布隆过滤器的概述及Python实现方法
2019/12/08 Python
python中property和setter装饰器用法
2019/12/19 Python
Python scrapy爬取小说代码案例详解
2020/07/09 Python
HTML5本地存储之Database Storage应用介绍
2013/01/06 HTML / CSS
Osklen官方在线商店:巴西服装品牌
2019/04/25 全球购物
广告学专业毕业生自荐信
2013/09/24 职场文书
皮肤科医师岗位职责
2013/12/04 职场文书
社区志愿者活动总结
2014/06/26 职场文书
爱的奉献演讲稿
2014/09/10 职场文书
代理人委托书
2014/09/16 职场文书
城市轨道交通工程职业生涯规划书范文
2014/09/16 职场文书
兵马俑的导游词
2015/02/02 职场文书
新手入门Mysql--sql执行过程
2021/06/20 MySQL
MySQL控制流函数(-if ,elseif,else,case...when)
2022/07/07 MySQL