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中复合属性选择器用法实例
Dec 31 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
Jan 20 Javascript
微信小程序 火车票查询实例讲解
Oct 17 Javascript
Vue单文件组件的如何使用方式介绍
Jul 28 Javascript
C#实现将一个字符转换为整数
Dec 12 Javascript
js数组去重的N种方法(小结)
Jun 07 Javascript
AngularJS修改model值时,显示内容不变的实例
Sep 13 Javascript
详解vue 自定义marquee无缝滚动组件
Apr 09 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
Apr 11 Javascript
ElementUI radio组件选中小改造
Aug 12 Javascript
React实现类似淘宝tab居中切换效果的示例代码
Jun 02 Javascript
在webstorm中配置less的方法详解
Sep 25 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 Undefined index和Undefined variable的解决方法
2008/03/27 PHP
PHP中读写文件实现代码
2011/10/20 PHP
php中引用符号(&amp;)的使用详解
2013/11/13 PHP
PDO::lastInsertId讲解
2019/01/29 PHP
php获取微信openid方法总结
2019/10/10 PHP
Javascript 判断 object 的特定类转载
2007/02/01 Javascript
用js实现键盘方向键翻页功能的代码
2007/06/03 Javascript
javascript与webservice的通信实现代码
2010/12/25 Javascript
使用javascript创建快捷方式的简单实例
2013/08/09 Javascript
javascript 获取HTML DOM父、子、临近节点
2014/06/16 Javascript
jquery文档操作wrap()方法实例简述
2015/01/10 Javascript
jQuery scrollFix滚动定位插件
2015/04/01 Javascript
javascript实现一个数值加法函数
2015/06/26 Javascript
浅析jquery数组删除指定元素的方法:grep()
2016/05/19 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
js实现适合新闻类图片的轮播效果
2017/02/05 Javascript
javascript计算渐变颜色的实例
2017/09/22 Javascript
koa+mongoose实现简单增删改查接口的示例代码
2019/05/13 Javascript
JavaScript原型继承和原型链原理详解
2020/02/04 Javascript
jQuery 动态粒子效果示例代码
2020/07/07 jQuery
vue中的v-model原理,与组件自定义v-model详解
2020/08/04 Javascript
python求列表交集的方法汇总
2014/11/10 Python
利用Python画ROC曲线和AUC值计算
2016/09/19 Python
python psutil模块使用方法解析
2019/08/01 Python
Python SELENIUM上传文件或图片实现过程
2019/10/28 Python
html5的新增的标签和废除的标签简要概述
2013/02/20 HTML / CSS
英国潮流网站:END.(全球免邮)
2017/01/16 全球购物
马来西亚网上美容店:Hermo.my
2017/11/25 全球购物
慕尼黑山地运动、户外服装和体育用品专家:Sporthaus Schuster
2019/08/27 全球购物
什么是serialVersionUID
2016/03/04 面试题
玲玲的画教学反思
2014/02/04 职场文书
公司户外活动总结
2014/07/04 职场文书
刑事附带民事起诉状
2015/05/19 职场文书
大学生入党自我鉴定范文
2019/06/21 职场文书
创业计划书之韩国烧烤店
2019/09/19 职场文书
go web 预防跨站脚本的实现方式
2021/06/11 Golang