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 相关文章推荐
js保留两位小数使用toFixed实现
Jul 29 Javascript
在Linux上用forever实现Node.js项目自启动
Jul 09 Javascript
JavaScript比较两个对象是否相等的方法
Feb 06 Javascript
如何编写高质量JS代码(续)
Feb 25 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
Sep 04 Javascript
Sublime Text 3常用插件及安装方法
Dec 16 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
Jan 04 Javascript
AngularJS中$watch和$timeout的使用示例
Sep 20 Javascript
浅谈JavaScript异步编程
Jan 20 Javascript
Canvas + JavaScript 制作图片粒子效果
Feb 08 Javascript
vue 使用外部JS与调用原生API操作示例
Dec 02 Javascript
JavaScript TAB栏切换效果的示例
Nov 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
PHP 函数语法介绍一
2009/06/14 PHP
php imagecreatetruecolor 创建高清和透明图片代码小结
2010/05/15 PHP
PHP+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)
2011/12/28 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
php中yii框架实例用法
2020/12/22 PHP
swoole锁的机制代码实例讲解
2021/03/04 PHP
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
js实现温度计时间样式代码分享
2015/08/21 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
2016/01/28 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
2016/05/26 Javascript
javascript 常用验证函数总结
2016/06/28 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
jQuery+json实现动态创建复杂表格table的方法
2016/10/25 Javascript
vue组件如何被其他项目引用
2017/04/13 Javascript
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
2019/09/05 Javascript
python三元运算符实现方法
2013/12/17 Python
Pyhthon中使用compileall模块编译源文件为pyc文件
2015/04/28 Python
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
Python三维绘图之Matplotlib库的使用方法
2020/09/20 Python
HTML5 embed标签定义和用法详解
2014/05/09 HTML / CSS
科沃斯机器人官网商城:Ecovacs
2016/08/29 全球购物
院药学专业个人求职信
2013/09/21 职场文书
餐饮业的创业计划书范文
2013/12/26 职场文书
中国央视网签名寄语
2014/01/18 职场文书
房屋继承公证书
2014/04/10 职场文书
贷款担保申请书
2014/05/20 职场文书
感恩小明星事迹材料
2014/05/23 职场文书
工地门卫岗位职责范本
2014/07/01 职场文书
支部书记四风问题自我剖析材料
2014/09/29 职场文书
2014年保卫科工作总结
2014/12/05 职场文书
三八妇女节主持词
2015/07/04 职场文书
2019年市场部个人述职报告(三篇)
2019/10/23 职场文书
python中的3种定义类方法
2021/11/27 Python
JavaScript实现两个数组的交集
2022/03/25 Javascript