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 相关文章推荐
在chrome中window.onload事件的一些问题
Mar 01 Javascript
Javascript alert消息换行的方法
Aug 07 Javascript
JS判断不能为空实例代码
Nov 26 Javascript
js树插件zTree获取所有选中节点数据的方法
Jan 28 Javascript
使用JavaScript开发IE浏览器本地插件实例
Feb 18 Javascript
JavaScript实现可拖拽的拖动层Div实例
Aug 05 Javascript
javascript监听页面刷新和页面关闭事件方法详解
Jan 09 Javascript
es6 symbol的实现方法示例
Apr 02 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
Sep 04 Javascript
Ajax请求超时与网络异常处理图文详解
May 23 Javascript
用JS创建一个录屏功能
Nov 11 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中的一个中文字符串截取函数
2007/02/14 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
详解PHP匿名函数与注意事项
2016/03/29 PHP
PHP 数组基本操作方法详解
2016/06/17 PHP
Laravel 5.3 学习笔记之 配置
2016/08/28 PHP
PHP实现Huffman编码/解码的示例代码
2018/04/20 PHP
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
2007/05/07 Javascript
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
2010/05/04 Javascript
JQuery Dialog的内存泄露问题解决方法
2010/06/18 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
2012/02/10 Javascript
onkeydown事件解决按回车键直接提交数据的需求
2013/04/11 Javascript
javascript中数组的定义及使用实例
2015/01/21 Javascript
百度地图自定义控件分享
2015/03/04 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
2015/09/24 Javascript
js滑动提示效果代码分享
2016/03/10 Javascript
Bootstrap开发实战之第一次接触Bootstrap
2016/06/02 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
2018/05/16 Javascript
vue项目如何刷新当前页面的方法
2018/05/18 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
2018/07/05 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
Python字典遍历操作实例小结
2019/03/05 Python
详解python读取image
2019/04/03 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
PyQt5 closeEvent关闭事件退出提示框原理解析
2020/01/08 Python
10个python爬虫入门实例(小结)
2020/11/01 Python
Python 打印自己设计的字体的实例讲解
2021/01/04 Python
英国家用电器购物网站:Hughes
2018/02/23 全球购物
英国优质家居用品网上品牌:URBANARA
2018/06/01 全球购物
Moda Italia荷兰:意大利男士服装
2019/08/31 全球购物
社区优秀志愿者先进事迹
2014/05/09 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
2014年终工作总结范本
2014/12/15 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书
常用的文件对应的MIME类型汇总
2022/04/26 HTML / CSS