编程 Javascript

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变化的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

vuejs点击class变化的实例

- Author -

lucky芬

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

用JavaScript获取网页中的js、css、Flash等文件

Dec 20 Javascript

JS 自动安装exe程序

Nov 30 Javascript

Javascript中获取出错代码所在文件及行数的代码

Sep 23 Javascript

从URL中提取参数与将对象转换为URL查询参数的实现代码

Jan 12 Javascript

jQuery实现ichat在线客服插件

Dec 29 Javascript

JavaScript实现横向滑出的多级菜单效果

Oct 09 Javascript

Node.js使用Express创建Web项目详细教程

Mar 31 Javascript

vue 2.0 购物车小球抛物线的示例代码

Feb 01 Javascript

200行代码实现blockchain 区块链实例详解

Mar 14 Javascript

React注册倒计时功能的实现

Sep 06 Javascript

小程序如何在不同设备上自适应生成海报的实现方法

Aug 20 Javascript

JS 基本概念详细介绍

Oct 16 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