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 相关文章推荐
jQuery ajax 路由和过滤器使用说明
Aug 02 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
Mar 13 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
May 03 Javascript
关于JSON与JSONP简单总结
Aug 16 Javascript
servlet+jquery实现文件上传进度条示例代码
Jan 25 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
May 13 Javascript
从零搭一个自用的前端脚手架的方法步骤
Sep 23 Javascript
vue实现配置全局访问路径头(axios)
Nov 01 Javascript
vue实现公告栏文字上下滚动效果的示例代码
Jun 16 Javascript
利用JavaScript模拟京东按键输入功能
Dec 01 Javascript
html5中sharedWorker实现多页面通信的示例代码
May 07 Javascript
js不常见操作运算符总结
Nov 20 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读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
使用PHP实现二分查找算法代码分享
2011/06/24 PHP
PHP 面向对象程序设计(oop)学习笔记(一) - 抽象类、对象接口、instanceof 和契约式编程
2014/06/12 PHP
dedecms集成财付通支付接口
2014/12/28 PHP
PHP文件生成的图片无法使用CDN缓存的解决方法
2015/06/20 PHP
php实现复制移动文件的方法
2015/07/29 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
解决PHP curl或file_get_contents下载图片损坏或无法打开的问题
2019/10/11 PHP
不能再简单的无闪刷新验证码原理很简单
2007/11/05 Javascript
JQuery中getJSON的使用方法
2010/12/13 Javascript
jQuery 源码分析笔记(4) Ready函数
2011/06/02 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
2013/01/06 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
2015/03/01 Javascript
在JavaScript中正确引用bind方法的应用
2015/05/11 Javascript
Bootstrap3制作搜索框样式的方法
2016/07/11 Javascript
JS实现重新加载当前页面
2016/11/29 Javascript
jQuery验证表单格式的使用方法
2017/01/10 Javascript
使用nodejs下载风景壁纸
2017/02/05 NodeJs
对于input 框限定输入值为浮点型的js代码
2017/09/25 Javascript
微信小程序实现星级评价效果
2018/12/28 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
2019/05/22 Javascript
Python编程实现的简单Web服务器示例
2017/06/22 Python
Django模板变量如何传递给外部js调用的方法小结
2017/07/24 Python
Python之自动获取公网IP的实例讲解
2017/10/01 Python
Python定义一个跨越多行的字符串的多种方法小结
2018/07/19 Python
对python模块中多个类的用法详解
2019/01/10 Python
Python实现隐马尔可夫模型的前向后向算法的示例代码
2019/12/31 Python
Tensorflow 多线程与多进程数据加载实例
2020/02/05 Python
python求numpy中array按列非零元素的平均值案例
2020/06/08 Python
Python使用windows设置定时执行脚本
2020/11/12 Python
细节决定成败演讲稿
2014/05/12 职场文书
四风自我剖析材料
2014/09/30 职场文书
2015年项目经理工作总结
2015/04/30 职场文书
利用Nginx代理如何解决前端跨域问题详析
2021/04/02 Servers
教你怎么用python爬取爱奇艺热门电影
2021/05/20 Python
Python类方法总结讲解
2021/07/26 Python