vuejs点击class变化的实例


Posted in Javascript onSeptember 05, 2018

如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue.js小demo</title>
 <style>
 .static{
 width: 100px;
 height: 60px;
 margin:30px auto;
 display: inline-block;
 cursor: pointer;
 }
 .class-a{
  background: lightpink;
 }
 .class-b{
  background: #eee;
 }
 </style>
</head>
<body> 
<div id="content">
  <span class="static" v-bind:class="{'class-a':isA,'class-b':!isA}" @click="toggle"></span>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.2.6/vue.js"></script>
<script>
var vm=new Vue({
  el:"#content",
  data:function(){
    return {
      isA:false
    };
  },
  methods:{
    toggle:function(){
      this.isA=!this.isA;
    }
  }
});
 
</script>
</html>

以上这篇vuejs点击class变化的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
Aug 13 Javascript
JS中Iframe之间传值的方法
Mar 11 Javascript
JS通过ajax动态读取xml文件内容的方法
Mar 24 Javascript
直接拿来用的页面跳转进度条JS实现
Jan 06 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
Apr 18 Javascript
jquery弹出遮掩层效果【附实例代码】
Apr 28 Javascript
Node.js中用D3.js的方法示例
Jan 16 Javascript
分分钟玩转Vue.js组件(二)
Mar 01 Javascript
AjaxUpLoad.js实现文件上传
Mar 05 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
Aug 29 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
Sep 16 Javascript
JavaScript实现前端倒计时效果
Feb 09 Javascript
jQuery滑动效果实现方法分析
Sep 05 #jQuery
vue+springboot实现项目的CORS跨域请求
Sep 05 #Javascript
jquery判断滚动条距离顶部的距离方法
Sep 05 #jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 #jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 #jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 #jQuery
深入理解Vue 的钩子函数
Sep 05 #Javascript
You might like
php对称加密算法示例
2014/05/07 PHP
jQuery ajax 路由和过滤器使用说明
2011/08/02 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
2013/02/01 Javascript
jQuery 事件的命名空间简单了解
2013/11/22 Javascript
ie8本地图片上传预览示例代码
2014/01/12 Javascript
基于jquery实现等比缩放图片
2014/12/03 Javascript
javascript中键盘事件用法实例分析
2015/01/30 Javascript
jquery图片滚动放大代码分享(2)
2015/08/28 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
2016/06/02 Javascript
jQuery的ajax下载blob文件
2016/07/21 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
2016/08/23 Javascript
Vue中的v-cloak使用解读
2017/03/27 Javascript
ES6下React组件的写法示例代码
2017/05/04 Javascript
基于AngularJS的简单使用详解
2017/09/10 Javascript
vue2.0 根据状态值进行样式的改变展示方法
2018/03/13 Javascript
JS栈stack类的实现与使用方法示例
2019/01/31 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
2019/06/15 Javascript
使用JS location实现搜索框历史记录功能
2019/12/23 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
2020/04/30 Javascript
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
[10:18]2018DOTA2国际邀请赛寻真——找回自信的TNCPredator
2018/08/13 DOTA
python进阶_浅谈面向对象进阶
2017/08/17 Python
python cx_Oracle的基础使用方法(连接和增删改查)
2017/11/19 Python
使用TensorFlow实现SVM
2018/09/06 Python
Python pandas用法最全整理
2019/08/04 Python
Win10下python 2.7与python 3.7双环境安装教程图解
2019/10/12 Python
机械工程师的岗位职责
2013/11/17 职场文书
运动会邀请函范文
2014/01/31 职场文书
大学应届生的自我评价
2014/03/06 职场文书
浪漫婚礼主持词
2014/03/14 职场文书
三月学雷锋月活动总结
2014/04/28 职场文书
大学专科自荐信
2014/06/17 职场文书
社保代办委托书怎么写
2014/10/06 职场文书
导游词之青岛崂山
2019/12/27 职场文书
Python OpenCV快速入门教程
2021/04/17 Python
Python 解决空列表.append() 输出为None的问题
2021/05/23 Python