因为class的绑定在实际的工作中会经常用到。所以特意记录一下，有好几种方法。

对象绑定方法，另外一个值来控制显示隐藏

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>

  <style>

    .active{

      color: red;

    }

  </style>

</head>

<body>

<div id="vue_det">

  <!--active是上面定义好的类名，flag是你设置的布尔变量-->

  <h1 :class="{active:flag}" @click="details">site : {{site}}</h1>

</div>

<script type="text/javascript">

  var vm = new Vue({

    el: '#vue_det',

    data: {

      site: "菜鸟教程",

      flag:false

    },

    methods: {

      details: function() {

        this.flag=!this.flag;  //点击来控制字体颜色切换

      }

    }

  })

</script>

</body>

</html>

数组的方法，数组里面的变量就是class的类名（同理数组里面可以放多个类名）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>

  <style>

    .active{

      color: red;

    }

  </style>

</head>

<body>

<div id="vue_det">

  <!--active是上面定义好的类名-->

  <h1 :class="[active]" @click="details">site : {{site}}</h1>

</div>

<script type="text/javascript">

  var vm = new Vue({

    el: '#vue_det',

    data: {

      site: "菜鸟教程",

      active:''

    },

    methods: {

      details: function() {

        this.active=this.active==="active"?"":"active"; //点击来控制字体颜色切换

      }

    }

  })

</script>

</body>

</html>

style绑定对象的方式，后面绑定的对象的值就是style的样式属性

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>

  <style>

    .active{

      color: red;

      font-size: 30px;

    }

  </style>

</head>

<body>

<div id="vue_det">

  <!--active是上面定义好的类名-->

  <sapn :style="obj" @click="details">site : {{site}}</sapn>

</div>

<script type="text/javascript">

  var vm = new Vue({

    el: '#vue_det',

    data: {

      site: "菜鸟教程",

      obj:{

        color:'red',

        fontSize : '30px'

      }

    },

    methods: {

      details: function() {

        this.obj.color='green'; //点击来控制字体颜色切换

      }

    }

  })

</script>

</body>

</html>

style绑定数组的方式，后面的数组的值可以有多个

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>

</head>

<body>

<div id="vue_det">

  <!--active是上面定义好的类名-->

  <sapn :style="[obj,obj2]" @click="details">site : {{site}}</sapn>

</div>

<script type="text/javascript">

  var vm = new Vue({

    el: '#vue_det',

    data: {

      site: "菜鸟教程",

      obj:{

        color:'red'

      },

      obj2:{

        fontSize : '30px'

      }

    },

    methods: {

      details: function() {

        this.obj.color='green'; //点击来控制字体颜色切换

      }

    }

  })

</script>

</body>

</html>

vue基础篇---class样式绑定的更多相关文章

  1. Vue 基础篇

    Vue 基础篇 一.框架与库的区别 JQ库->DOM(DOM操作) + Ajax请求 art-template库->模板引擎 框架 -> 全方位.功能齐全 简易的DOM体验 + 发请 ...

  2. vue 自学笔记(4): 样式绑定与条件渲染

    一:对象绑定 Vue 对于页面的样式加载也有独特的方式,按照 Vue 提供的方式,我们可以轻松的控制它们的呈现. 假使我们要实现点击 div 变色 Vue 提供的样式方案的本质是对元素节点进行属性的绑 ...

  3. Vue 基础篇---computed 和 watch

    最近在看前端 Vue方面的基础知识,虽然前段时间也做了一些vue方面的小项目,但总觉得对vue掌握的不够 所以对vue基础知识需要注意的地方重新撸一遍,可能比较零碎,看到那块就写哪块吧 1.vue中的 ...

  4. vue基础篇---vue组件

    vue模块第一篇,因为公司马上要用到这vue开发.早就想好好看看vue了.只有实际工作中用到才会进步最快.vue其他的简单指令就不多讲了,没啥意思,网上一大堆.看w3c就ok. 组件这个我个人感觉坑蛮 ...

  5. vue基础——表单输入绑定

    一.基础用法 你可以用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定.它会根据控件类型自动选择正确的方法来更新元素. 尽管有些神 ...

  6. vue基础——Class与Style绑定

    Class与Style绑定 操作元素的class列表和内联样式是数据绑定的一个常见的需求. 因为它们都是属性,所以我们可以用v-bind来处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼 ...

  7. vue基础---表单输入绑定

    [一]基础用法 用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自动选取正确的方 ...

  8. vue基础---Class 与 Style 绑定

    [一]绑定HTML Class (1)对象语法 ①普通绑定class <div id="area" v-bind:class="className"> ...

  9. vue基础篇---vue组件《2》

    定义全局组件 我们通过Vue的component方法来定义一个全局组件. <div id="app"> <!--使用定义好的全局组件--> <coun ...

随机推荐

  1. 第二次sprint

    一.这次冲刺就是实施阶段了,主要对程序进行一次骨架的构建,基本上已经完成了界面的设计,但是在算法上还有很大漏洞,整个程序还是属于不成熟阶段. 二.这是我们的界面 三.已经有的功能:随机生成题目并算出答 ...

  2. 第三个spring冲刺第3天

    基本功能跟界面都完成了,今天小组开了个会,基于跟别的小组对比的效果,感觉自己组的效果没别人的好,很多方面还欠缺,所以我们会继续跟进完善.

  3. 总结 推广app

    扫一扫二维码即可安装使用我们的app,方便快捷. 电脑端下载地址:http://pan.baidu.com/s/1bocWPPX http://a.app.qq.com/o/simple.jsp?pk ...

  4. boost::asio之（一）简单客户端服务器回显功能

    客户端: // BoostDev.cpp: 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> #inc ...

  5. Win2016以及win10 IIS10 下安装IEwebcontrol的方法

    1. 公司产品需要安装IE webcontrol控件 但是在win2016以及win10 上面安装时 因为IIS 已经升级到了IIS10 安装时会提示: 兼容解决的方法比较简单,修改注册表即可 HKE ...

  6. [转帖]召冠总的 SQLSERVER常用的性能诊断语句. --保存学习备查

    CopyFrom https://www.cnblogs.com/zhaoguan_wang /*常规服务器动态管理对象包括:dm_db_*:数据库和数据库对象dm_exec_*:执行用户代码和关联的 ...

  7. IDEA 操作及快捷键总结

    一.设置IDEA使用Eclipse快捷键 File->Settings->Keymap->选择Eclipse,就可以使用Eclipse的快捷键了,但是不能修改.如果想要修改,需要点击 ...

  8. 软件工程_7th weeks

    内聚和耦合(学习笔记) 一.内聚 内聚是一个模块内部各成分之间相关联程度的度量.把内聚按紧密程度从低到高排列次序为: 1.偶然内聚:指一个模块内各成分为完成一组功能而组合在一起,它们相互之间即使有关系 ...

  9. python之tkinter使用-窗口居中显示

    # 窗口居中显示 import tkinter as tk def set_win_center(root, curWidth='', curHight=''): ''' 设置窗口大小,并居中显示 : ...

  10. MT【32】内外圆(Apollonius Circle）的几何证明

    另一方面,如果 M 满足(1)式,那么M必然在以PQ为直径的圆上.事实上当M为P或者Q时,这是显然的.当M异于P,Q时,由$\frac{|MB|}{|MC|}=\frac{|PB|}{|PC|}=\l ...