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 教程 json入门学习笔记
Sep 22 Javascript
jQuery 表格工具集
Apr 25 Javascript
通过jQuery源码学习javascript(三)
Dec 27 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
Jan 07 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
Apr 06 Javascript
js实现匹配时换色的输入提示特效代码
Aug 17 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
Nov 29 Javascript
JavaScript必知必会(六) delete in instanceof
Jun 08 Javascript
JavaScript的this关键字的理解
Jun 18 Javascript
layui前端框架之table表数据的刷新方法
Aug 17 Javascript
vue3.0实现插件封装
Dec 14 Vue.js
绘制微信小程序验证码功能的实例代码
Jan 05 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
基于MySQL分区性能的详细介绍
2013/05/02 PHP
php显示指定目录下子目录的方法
2015/03/20 PHP
PHP高效获取远程图片尺寸和大小的实现方法
2017/10/20 PHP
javascript数字格式化通用类 accounting.js使用
2012/08/24 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
2015/06/19 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
2015/12/13 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
全面了解JS中的匿名函数
2016/06/29 Javascript
HTML页面,测试JS对C函数的调用简单实例
2016/08/09 Javascript
使用canvas及js简单生成验证码方法
2017/04/02 Javascript
JS简单生成随机数(随机密码)的方法
2017/05/11 Javascript
vue的全局提示框组件实例代码
2018/02/26 Javascript
在react中使用vuex的示例代码
2018/07/30 Javascript
layui的table单击行勾选checkbox功能方法
2018/08/14 Javascript
解决angularjs WdatePicker ng-model的问题
2018/09/13 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
2018/09/15 Javascript
jQuery实现ajax的嵌套请求案例分析
2019/02/16 jQuery
[54:10]完美世界DOTA2联赛PWL S2 Magma vs FTD 第二场 11.29
2020/12/03 DOTA
Python 流程控制实例代码
2009/09/25 Python
Python的动态重新封装的教程
2015/04/11 Python
在Python的Django框架中调用方法和处理无效变量
2015/07/15 Python
举例讲解Python的lambda语句声明匿名函数的用法
2016/07/01 Python
详解Python文本操作相关模块
2017/06/22 Python
python获取网页中所有图片并筛选指定分辨率的方法
2018/03/31 Python
Linux下安装python3.6和第三方库的教程详解
2018/11/09 Python
python3 selenium自动化 下拉框定位的例子
2019/08/23 Python
css3 边框、背景、文本效果的实现代码
2018/03/21 HTML / CSS
戴森美国官网:Dyson美国
2016/09/11 全球购物
C#实现启动一个进程
2016/10/01 面试题
感恩母亲节演讲稿
2014/05/07 职场文书
水利水电建筑施工应届生求职信
2014/07/04 职场文书
2014年学生工作总结
2014/11/20 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书
未来,这5大方向都很适合创业
2019/07/22 职场文书
python not运算符的实例用法
2021/06/30 Python
MongoDB误操作后使用oplog恢复数据
2022/04/11 MongoDB