因为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. format()函数用法

    基本语法是通过 {} 和 : 来代替以前的 % . format 函数可以接受不限个参数,位置可以不按顺序. 直接打印输出参数: 通过字典设置参数: 通过列表索引设置参数:

  2. Linux环境(CentOS)安装维护过程中用到的常见命令

    1. yum 安装时需要选择仓库 一般的路径 /etc/repos.d/ 2. 查看安装了哪些软件的 yum list |grep docker installed 的就是已经安装的软件. 3. 卸载 ...

  3. scipy线性模块liner（linalg）

    #liner import numpy as np from scipy import linalg as lg arr=np.array([[1,1],[0,1]]) matr=np.mat('[1 ...

  4. Security Testing Test Scenarios

    1 check for sql injection attacks2 secure pages should use https protocol3 page crash should not rev ...

  5. docker --swarm创建一个集群

    如果搭建错误可以强制脱离集群网络: docker swarm leave --force 初始化集群网络管理节点: docker swarm init --advertise-addr 10.101. ...

  6. 【BZOJ4000】【LOJ2104】【TJOI2015】棋盘 (状压dp + 矩阵快速幂)

    Description ​ 有一个\(~n~\)行\(~m~\)列的棋盘,棋盘上可以放很多棋子,每个棋子的攻击范围有\(~3~\)行\(~p~\)列.用一个\(~3 \times p~\)的矩阵给出了 ...

  7. 【BZOJ2671】Calc（莫比乌斯反演）

    [BZOJ2671]Calc 题面 BZOJ 给出N,统计满足下面条件的数对(a,b)的个数: 1.\(1\le a\lt b\le N\) 2.\(a+b\)整除\(a*b\) 我竟然粘了题面!!! ...

  8. BZOJ 2929: [Poi1999]洞穴攀行

    2929: [Poi1999]洞穴攀行 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 351  Solved: 195[Submit][Status][ ...

  9. 【翻译】go memory model

    https://studygolang.com/articles/819 原文链接 Introduction The Go memory model specifies the conditions ...

  10. 教程] 《开源框架-Afinal》之FinalHttp 01一步一脚

    1.FinalHttp是什么 :FinalHttp 对 HttpClient再次封装,最简洁的就是增加了许多回调的方法,对Get 和 Post 请求进行了简化.另外一点就是FinalHttp加入线程池 ...