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 相关文章推荐
优化网页之快速的呈现我们的网页
Jun 29 Javascript
JS类定义原型方法的两种实现的区别评论很多
Sep 12 Javascript
js 剪切板应用clipboardData详细解析
Dec 17 Javascript
用JS在浏览器中创建下载文件
Mar 05 Javascript
jQuery学习笔记之jQuery原型属性和方法
Jun 09 Javascript
js实现分割上传大文件
Mar 09 Javascript
COM组件中调用JavaScript函数详解及实例
Feb 23 Javascript
AngularJS Toaster使用详解
Feb 24 Javascript
100行代码理解和分析vue2.0响应式架构
Mar 09 Javascript
详解angularjs中如何实现控制器和指令之间交互
May 31 Javascript
基于jQuery封装的分页组件
Jun 26 jQuery
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 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实现两个数组相加的方法
2015/02/17 PHP
JS解密入门之凭直觉解
2008/06/25 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
input链接页面、打开新网页等等的具体实现
2013/12/30 Javascript
Javascript基础教程之if条件语句
2015/01/18 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
2015/07/05 Javascript
基于javascript实现窗口抖动效果
2016/01/03 Javascript
深入浅析AngularJS中的module(模块)
2016/01/04 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
2020/03/26 Javascript
jQuery操作iframe中js函数的方法小结
2016/07/06 Javascript
jQuery中DOM节点删除之empty与remove
2017/01/20 Javascript
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
jQuery实现动态添加节点与遍历节点功能示例
2017/11/09 jQuery
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
JQuery选中select组件被选中的值方法
2018/03/08 jQuery
Node.js文件编码格式的转换的方法
2018/04/27 Javascript
ES6 系列之 WeakMap的使用示例
2018/08/06 Javascript
Vue父子组件之间的通信实例详解
2018/09/28 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
2019/09/12 Javascript
javascript sort()对数组中的元素进行排序详解
2019/10/13 Javascript
基于Vue全局组件与局部组件的区别说明
2020/08/11 Javascript
typescript编写微信小程序创建项目的方法
2021/01/29 Javascript
python爬虫常用的模块分析
2014/08/29 Python
在Django中创建动态视图的教程
2015/07/15 Python
对python numpy数组中冒号的使用方法详解
2018/04/17 Python
Python格式化输出字符串方法小结【%与format】
2018/10/29 Python
Pyorch之numpy与torch之间相互转换方式
2019/12/31 Python
肯尼亚网上商城:Kilimall
2016/08/20 全球购物
Johnson Fitness澳大利亚:高级健身器材
2021/03/16 全球购物
中餐厅经理岗位职责
2014/04/11 职场文书
学雷锋活动总结报告
2014/06/26 职场文书
计划生育证明格式范本
2014/09/12 职场文书
护士长2014年终工作总结
2014/11/11 职场文书
自主招生专家推荐信
2015/03/26 职场文书
信仰纪录片观后感
2015/06/08 职场文书
Python实现数据的序列化操作详解
2022/07/07 Python