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中令你抓狂的魔术变量
Nov 30 Javascript
javascript radio 联动效果
Mar 04 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
Apr 25 Javascript
asm.js使用示例代码
Nov 28 Javascript
js日期范围初始化得到前一个月日期的方法
May 05 Javascript
AngularJS 自定义过滤器详解及实例代码
Sep 14 Javascript
ES5 ES6中Array对象去除重复项的方法总结
Apr 27 Javascript
实例讲解JavaScript预编译流程
Jan 24 Javascript
微信小程序实现简易table表格
Jun 19 Javascript
详解VS Code使用之Vue工程配置format代码格式化
Mar 20 Javascript
Vue Object 的变化侦测实现代码
Apr 15 Javascript
小程序实现密码输入框
Nov 16 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
DC《小丑》11项提名领跑奥斯卡 Netflix成第92届奥斯卡提名最大赢家
2020/04/09 欧美动漫
在任意字符集下正常显示网页的方法二(续)
2007/04/01 PHP
snoopy PHP版的网络客户端提供本地下载
2008/04/15 PHP
js获取提交的字符串的字节数
2009/02/09 Javascript
jQuery 使用手册(六)
2009/09/23 Javascript
利用jQuery的$.event.fix函数统一浏览器event事件处理
2009/12/21 Javascript
jquery使用append(content)方法注意事项分享
2014/01/06 Javascript
用javascript读取xml文件读取节点数据
2014/08/12 Javascript
JS小游戏之象棋暗棋源码详解
2014/09/25 Javascript
js控制文本框只输入数字和小数点的方法
2015/03/10 Javascript
js window对象属性和方法相关资料整理
2015/11/11 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
Angular @HostBinding()和@HostListener()用法
2018/03/05 Javascript
JS实现简单获取最近7天和最近3天日期的方法
2018/04/18 Javascript
详解用async/await来处理异步
2019/08/28 Javascript
[28:05]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第一场 10月30日
2020/10/31 DOTA
详解Python pygame安装过程笔记
2017/06/05 Python
Python中顺序表的实现简单代码分享
2018/01/09 Python
谈谈python中GUI的选择
2018/03/01 Python
python发送邮件脚本
2018/05/22 Python
python实现kmp算法的实例代码
2019/04/03 Python
使用pycharm在本地开发并实时同步到服务器
2019/08/02 Python
python实现对列表中的元素进行倒序打印
2019/11/23 Python
python3正则模块re的使用方法详解
2020/02/11 Python
Python基于callable函数检测对象是否可被调用
2020/10/16 Python
浅析HTML5 Landmark
2020/09/11 HTML / CSS
全球最大的在线橄榄球商店:Lovell Rugby
2018/05/20 全球购物
PHP如何对用户密码进行加密
2014/07/31 面试题
实现strstr功能,即在父串中寻找子串首次出现的位置
2016/08/05 面试题
车辆转让协议书
2014/04/15 职场文书
四风个人对照检查材料思想汇报
2014/09/25 职场文书
2014年个人业务工作总结
2014/11/17 职场文书
初中班主任工作随笔
2015/08/15 职场文书
Python制作表白爱心合集
2022/01/22 Python
Python如何让字典保持有序排列
2022/04/29 Python