因为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. BugPhobia进阶篇章：系统架构技术规格

    0x01 :开发级需求分析 在开发过程中,团队本身在开发的起始阶段确定了基本的开发级需求分析: 在开发过程中,除了需要满足用户级需求以为,我们还需要针对开发团队的特点,满足一些开发级的需求和约束.作为 ...

  2. Java abstract interface与 interface的区别

    我们常常遇到abstract class与 interface的区别,今天却遇到了abstract interface,感觉interface不用abstract再修饰了啊.结论:事实也确实如此,编译 ...

  3. mongoose 入门基本操作

    简介 Mongoose是在node.js异步环境下对mongodb进行便捷操作的对象模型工具 那么要使用它,首先你得装上node.js和mongodb,关于mongodb的安装和操作介绍可以参考:ht ...

  4. SAP字体调节大小

    登陆SAP 之后,菜单下面一行,最右边的那个彩色按钮(SAP GUI),点击“选项”-可视设计-字体设计-固定狂赌字体设计,点击:选择字体 即可.

  5. FICO基础知识（一）

    GL – 总账 (General Ledger) 总帐核算的中心任务是提供外部会计及其所涉及帐户的概貌. 总账会计主要用途:根据不同的会计准则(如欧洲的 IAS, 美国的GAAP, 中国国家会计准则) ...

  6. 理解 Delphi 的类(十) - 深入方法[18] - 在接口区声明的方法都相当于提前声明了

    //要点18: 如果函数在接口区定义了, 就无需用 forward 提前声明了 unit Unit1; interface uses   Windows, Messages, SysUtils, Va ...

  7. python下对appium服务端的操作

    appium -p 4703 -bp 5500 -U 127.0.0.1:5005 -p 指的是·appium的服务器端口 -bp 指的是 连接安卓设备端口 -U 指的是 安卓设备 大体思路: 1. ...

  8. luogu1856

    P1856 [USACO5.5]矩形周长Picture 题目背景 墙上贴着许多形状相同的海报.照片.它们的边都是水平和垂直的.每个矩形图片可能部分或全部的覆盖了其他图片.所有矩形合并后的边长称为周长. ...

  9. 安卓创始人计划推出能帮你约会的AI手机

    安卓操作系统的创始人安迪·鲁宾早些年已经离开谷歌公司,离开谷歌后鲁宾成立Essential  Phone手机品牌.不过正如你所知道的那样尽管安迪·鲁宾有着很大的名气,但Essential  Phone ...

  10. BZOJ4196[Noi2015]软件包管理器——树链剖分+线段树

    题目描述 Linux用户和OSX用户一定对软件包管理器不会陌生.通过软件包管理器,你可以通过一行命令安装某一个软件包,然后软件包管理器会帮助你从软件源下载软件包,同时自动解决所有的依赖(即下载安装这个 ...