因为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. Maven项目中添加JDBC驱动

    在pom.xml配置文件中添加: <dependency> <groupId>mysql</groupId> <artifactId>mysql-con ...

  2. Machine Learning Based Proactive Flow Entry Deletion for OpenFlow

    来源:IEEE 2018 作者:Hemin Yang and George F.Riley 摘要: 流表容量有限,因此高效管理流表至关重要.本文重点讨论了OpenFlow中定义的一种流表管理机制,即能 ...

  3. ADOTable的CancelUpdate和CancelBatch的区别？(100分)

    出差新疆,修改别人的代码,请教CancelUpdate和CancelBatch的区别! 如果希望取消对当前记录所做的任何更改或者放弃新添加的记录,则必须调用CancelUpdate 方法CancelB ...

  4. jquery html 獲取或設置

    jquery提供操作html元素的屬性和內容的強大方法. DOM就是獨立于平台和語言的界面,允許程序和腳本動態訪問和改變DOM的內容,結構和樣式. 獲取內容:text(),html(),val(),a ...

  5. 微信小程序的界面下拉刷新

    小程序的下拉刷新的值设置:需要设置app.json的window中 "navigationBarTextStyle":true  

  6. string.PadLeft & string.PadRight

    比如我想让他的长度是20个字符有很多字符串如string a = "123",只有3个字符怎么让他们在打印或显示在textBox上的时候不够的长度用空格补齐呢? string.Pa ...

  7. C#遍历类的属性，然后给其赋值

    public class PP { public string a { get; set; } public string b { get; set; } public string c { get; ...

  8. maven dependcymanage作用在父类里面定义依赖包 子类不会自动继承需要主动使用 这样解决了父类引用任意包 子类就会引用的问题

    maven dependcymanage作用在父类里面定义依赖包 子类不会自动继承需要主动使用 这样解决了父类引用任意包 子类就会引用的问题  子类在引用时候 不需要加上版本号

  9. Django-website 程序案例系列-1 最简单的web服务器

    templates:html模板文件夹下面建立文件login.html <!DOCTYPE html> <html lang="en"> <head& ...

  10. BZOJ5093 图的价值（NTT+斯特林数）

    显然每个点会提供相同的贡献.于是现在只考虑1号点的贡献.若其度数为i,则在2~n号点选i个连上,剩下的边随便连,这样可以算出答案为 这个式子可以O(n)计算.发现k比较小,于是考虑如何将这个式子化为与 ...