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之折叠面板的深入解析
Jun 19 Javascript
Javascript中Event属性搜集整理
Sep 17 Javascript
JavaScript禁止页面操作的示例代码
Dec 17 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
Apr 01 Javascript
JS运动相关知识点小结(附弹性运动示例)
Jan 08 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
Aug 24 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
Oct 16 Javascript
node.js爬虫爬取拉勾网职位信息
Mar 14 Javascript
ionic 自定义弹框效果
Jun 27 Javascript
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
JS实现的合并多个数组去重算法示例
Apr 11 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
Nov 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
MySQL连接数超过限制的解决方法
2011/07/17 PHP
php数组使用规则分析
2015/02/27 PHP
php图形jpgraph操作实例分析
2017/02/22 PHP
JS 的应用开发初探(mootools)
2009/12/19 Javascript
JQuery的ajax获取数据后的处理总结(html,xml,json)
2010/07/14 Javascript
终于解决了IE8不支持数组的indexOf方法
2013/04/03 Javascript
html文档中的location对象属性理解及常见的用法
2014/08/13 Javascript
jQuery中判断对象是否存在的方法汇总
2016/02/24 Javascript
Bootstrap模块dropdown实现下拉框响应
2016/05/22 Javascript
浅析jquery unbind()方法移除元素绑定的事件
2016/05/24 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
2016/08/16 Javascript
js图片上传前预览功能(兼容所有浏览器)
2016/08/24 Javascript
基于jQuery实现滚动切换效果
2016/12/02 Javascript
从零学习node.js之模块规范(一)
2017/02/21 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
2017/05/24 Javascript
JS判断时间段的实现代码
2017/06/14 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
Vue组件选项props实例详解
2017/08/18 Javascript
如何重置vue打印变量的显示方式
2017/12/06 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
2018/09/05 jQuery
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
Element Alert警告的具体使用方法
2020/07/27 Javascript
vue设置全局访问接口API地址操作
2020/08/14 Javascript
原生js实现购物车
2020/09/23 Javascript
如何在vue 中引入使用jquery
2020/11/10 jQuery
vue 中this.$set 动态绑定数据的案例讲解
2021/01/29 Vue.js
Python中使用dom模块生成XML文件示例
2015/04/05 Python
Python实现多线程抓取网页功能实例详解
2017/06/08 Python
Python中列表list以及list与数组array的相互转换实现方法
2017/09/22 Python
Pytorch技巧:DataLoader的collate_fn参数使用详解
2020/01/08 Python
Python3操作MongoDB增册改查等方法详解
2020/02/10 Python
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
C#如何调用Word并打开一个Word文档
2013/05/08 面试题
学校工作推荐信范文
2014/07/11 职场文书
仙境之桥观后感
2015/06/16 职场文书
Laravel中获取IP的真实地理位置
2021/04/01 PHP