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 相关文章推荐
Extjs学习笔记之六 面版
Jan 08 Javascript
js生成验证码并直接在前端判断
May 15 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
May 05 Javascript
Vue.js每天必学之组件与组件间的通信
Sep 08 Javascript
微信小程序中多个页面传参通信的学习与实践
May 05 Javascript
Vue中img的src属性绑定与static文件夹实例
May 18 Javascript
谈谈对vue响应式数据更新的误解
Aug 01 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
Aug 03 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
Aug 07 Javascript
Vue列表渲染的示例代码
Nov 01 Javascript
Node.js 实现远程桌面监控的方法步骤
Jul 02 Javascript
Vue项目配置跨域访问和代理proxy设置方式
Sep 08 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/07/12 PHP
收集的二十一个实用便利的PHP函数代码
2010/04/22 PHP
php实现文件编码批量转换
2014/03/10 PHP
服务器上配置PHP运行环境教程
2015/02/12 PHP
详解PHP如何更好的利用PHPstorm的自动提示
2017/08/18 PHP
php设计模式之适配器模式原理、用法及注意事项详解
2019/09/24 PHP
JavaScript 提升运行速度之循环篇 译文
2009/08/15 Javascript
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
2011/01/17 Javascript
jquery移动listbox的值原理及代码
2013/05/03 Javascript
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
解决jquery版本冲突的有效方法
2014/09/02 Javascript
jQuery formValidator表单验证
2016/01/07 Javascript
js判断主流浏览器类型和版本号的简单实现代码
2016/05/26 Javascript
d3.js实现简单的网络拓扑图实例代码
2016/11/06 Javascript
angular 动态组件类型详解(四种组件类型)
2017/02/22 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
Vuex的API文档说明详解
2020/02/05 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
2020/04/28 Javascript
[06:10]6.81新信使新套装!给你一个炫酷的DOTA2
2014/05/06 DOTA
python装饰器使用方法实例
2013/11/21 Python
python数据结构之二叉树的遍历实例
2014/04/29 Python
Python3.4 tkinter,PIL图片转换
2018/06/21 Python
pandas删除指定行详解
2019/04/04 Python
Django Path转换器自定义及正则代码实例
2020/05/29 Python
Python datetime模块使用方法小结
2020/06/18 Python
python利用蒙版抠图(使用PIL.Image和cv2)输出透明背景图
2020/08/04 Python
html5的canvas方法使用指南
2014/12/15 HTML / CSS
html5自定义video标签的海报与播放按钮功能
2019/12/04 HTML / CSS
国际知名军事风格休闲装品牌:Alpha Industries(阿尔法工业)
2017/05/24 全球购物
不假外出检讨书
2014/01/27 职场文书
服装采购员岗位职责
2014/03/15 职场文书
三八节主持词
2014/03/17 职场文书
简洁的英文求职信范文
2014/05/03 职场文书
意向书范本
2014/07/29 职场文书
地理科学专业自荐信
2014/09/01 职场文书
辅导员学期工作总结
2015/08/14 职场文书