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 相关文章推荐
Use Word to Search for Files
Jun 15 Javascript
javascript 正则替换 replace(regExp, function)用法
May 22 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
Nov 20 Javascript
深入剖析JavaScript编程中的对象概念
Oct 21 Javascript
jquery实现转盘抽奖功能
Jan 06 Javascript
jQuery 判断元素整理汇总
Feb 28 Javascript
js实现简易聊天对话框
Aug 17 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
May 22 Javascript
详解JavaScript实现动态的轮播图效果
Apr 29 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
Mar 14 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
Jul 30 Javascript
JavaScript十大取整方法实例教程
Dec 03 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冒泡排序算法代码详细解读
2011/07/17 PHP
php数组中包含中文的排序方法
2014/06/03 PHP
thinkPHP微信分享接口JSSDK用法实例
2017/07/07 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
最短的javascript:地址栏载入脚本代码
2011/10/13 Javascript
使用firebug进行调试javascript的示例
2013/12/16 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
Javascript中call和apply函数的比较和使用实例
2015/02/03 Javascript
jquery中EasyUI使用技巧小结
2015/02/10 Javascript
jquery中JSON的解析方式
2015/03/16 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
2016/12/28 Javascript
微信小程序 动态绑定数据及动态事件处理
2017/03/14 Javascript
详解webpack提取第三方库的正确姿势
2017/12/22 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
2018/11/11 Javascript
微信小程序如何连接Java后台
2019/08/08 Javascript
vue实现Input输入框模糊查询方法
2021/01/29 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
2020/11/16 Javascript
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
python错误:AttributeError: 'module' object has no attribute 'setdefaultencoding'问题的解决方法
2014/08/22 Python
python BeautifulSoup设置页面编码的方法
2015/04/03 Python
浅谈Python 列表字典赋值的陷阱
2019/01/20 Python
python小白切忌乱用表达式
2020/05/29 Python
基于Python词云分析政府工作报告关键词
2020/06/02 Python
用python实现一个简单计算器(完整DEMO)
2020/10/14 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
2020/07/20 HTML / CSS
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
匡威意大利官方商店 :Converse意大利
2018/11/27 全球购物
高性能钓鱼服装:Huk Gear
2019/02/20 全球购物
HQhair美国/加拿大:英国化妆品、美容及美发产品商城
2019/04/15 全球购物
小学毕业感言150字
2014/02/05 职场文书
学校门卫岗位职责范本
2014/06/30 职场文书
质量保证书格式
2015/02/27 职场文书
Python Pycharm虚拟下百度飞浆PaddleX安装报错问题及处理方法(亲测100%有效)
2021/05/24 Python
Ruby处理CSV数据方法详解
2022/04/18 Ruby