vuejs点击class变化的实例

如下所示：

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

赞 (0)

相关推荐

  • 详解Vue.js动态绑定class

    Vue.js 的核心是一个响应的数据绑定系统,它允许我们在普通 HTML 模板中使用特殊的语法将 DOM "绑定"到底层数据.被绑定的DOM 将与数据保持同步,每当数据有改动,相应的DOM视图也会更新.基于这种特性,通过vue.js动态绑定class就变得非常简单. 1. 数据绑定 vue 指令以 v- 前缀标示,数据绑定的指令 v-bind:属性名, 简写为 :属性名, 简单的数据绑定例子如下: <a v-bind:href="http://www.cnblogs.c

  • Vue 菜单栏点击切换单个class(高亮)的方法

    步骤: 遍历对象(goods)获取菜单栏每一项的对象(item)和下标(index) 添加点击事件toggle(),传入下标参数:@click="fn1();fn2()" 动态切换classname::class="{'active':index ==checkindex }"> (class赋予对应下标值的DOM) ps:该方法直接切换class,不需要手动添加清除其他非动态DOM的class html <ul> <li v-for=&qu

  • vue2.0中click点击当前li实现动态切换class

    vue2.0中click点击当前li实现动态切换class

    1,文件内容 ----//为item添加不存在的属性,需要使用vue提供的Vue.set( object, key, value )方法.  看详解:https://cn.vuejs.org/v2/api/#Vue-set <template> <div> <ul> <li v-for="(item,$index) in items" @click="selectStyle (item, $index) " :class=&

  • vue.js实现点击后动态添加class及删除同级class的实现代码

    vue.js实现点击后动态添加class及删除同级class的实现代码

    最近使用vue需要实现一个点餐选择商品规格的页面,需要通过vue动态的给被点击的元素添加class名字,使其变色,其他的删除class.如图: 开始在网上找了许多办法发现不是太好用,最后找到一个发现还是不错的,记录一下 html: <div class="weui-mask" id="guige"> <div class="guigeBox"> <p class="guigeTitle">{

  • vuejs点击class变化的实例

    如下所示: <!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: poi

  • vuejs 动态添加input框的实例讲解

    实例如下: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <c:set var="front" val

  • Vue 监听元素前后变化值实例

    我就废话不多说了,大家还是直接看代码吧~ export default { data() { return { item: '' } }, watch: { item(now, before){ let remove = before.filter(x => now.indexOf(x) == -1); let add = now.filter(x => before.indexOf(x) == -1); /* 显示字符串或数组元素的增加和减少 */ console.log(add, remo

  • JS实现移动端实时监听输入框变化的实例代码

    JS实现移动端实时监听输入框变化的实例代码

    如果是在pc端,监听输入框你可能想到focus.blur.hover.onkeyup这些事件,但是如果是在移动端使用使用这些事件用户体验极差,因为你要用户收起键盘并且再点个空白处才生效,甚至还存在很大的兼容差异.那么怎么解决呢? 方案一 以前做一个简单的模糊搜索框的需求,大致思路是定义一个1s左右执行的定时器,定时器函数里面的逻辑是 判断文本框内容的长度,如果跟上一次长度有变化,就走一遍查询,如果没有变化不执行任何操作. 方案二 利用jquery提供的 input propertychange

  • vuejs选中当前样式active的实例

    如下所示: <template> <div> <table id="longzhoufeng" class="table table-striped table-bordered" width="100%" style="border: 0 solid #fff;margin-top: 10px;"> <thead class="thead-bottom-line"

  • AngularJS点击添加样式、点击变色设置的实例代码

    AngularJS点击添加样式、点击变色设置的实例代码

    本文介绍了AngularJS点击添加样式.点击变色设置的实例代码,分享给大家,具体如下: 首先解释需求是这样的,有个列表,当你点击哪一行时,哪一行背景变成灰色,在JQ中,大家都知道,这是非常容易的,加一个addClass就行了,那么AngularJS如何实现呢? 下面我们看代码部分 <!doctype html> <html ng-app="a2_11"> <head> <title>添加元素样式</title> <sc

  • 简单纯js实现点击切换TAB标签实例

    简单纯js实现点击切换TAB标签实例

    一个不需要jQuery实现的tab选项卡切换效果,代码简洁易用. 默认是鼠标悬停显示tab效果,可将其中的onmouseover 修改为 onclick 点击效果 使用方法: 1.将附件中的index.html中的css样式以及代码部分拷贝到你需要的地方即可 相关链接:几行简单的jQuery代码搞定tab标签切换效果 展示效果图: 效果展示  源码下载 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &

  • jQuery添加options点击事件并传值实例代码

    jQuery添加options点击事件并传值实例代码

     说明: 最近刚接了一个项目,其中有项目需求要求根据选择不同店铺选项,上送不同id值,展示不同商品列表 先给大家展示下实现效果图:如果大家感兴趣对此很感兴趣,可以参考下实现代码. var formStr = "{'supplierId':'供应链企业|%-jm-sprt-%|93794498-3'}"; $.ajax({ type : "post", dataType : "json", cache : false, url : "..

  • js实时获取窗口大小变化的实例代码

    如下所示: $(window).resize(function(){ var Height = $(window).height(); var Width = $(window).width(); }) 以上这篇js实时获取窗口大小变化的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • jQuery轻松实现表格的隔行变色和点击行变色的实例代码

    jQuery轻松实现表格的隔行变色和点击行变色的实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m

随机推荐