关于v-bind绑定class的实例

作用：可用于不同样式之间的切换

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <title>Document</title>

   <script src="https://unpkg.com/vue"></script>

   <style>

   .static {

     font-size: 120px;

     width: 600px;

     margin: 0 auto;

     background-color: yellow;

     height: 120px;

     line-height: 120px;

     text-align: center;

   }  

   .class-a {

     color: #FF0000;

   }  

   .class-b {

     text-decoration: underline;

   }

   </style>

 </head>  

 <body>

   <div id="app">

     <div v-bind:class="classObject">

     关于class的绑定

     </div>

   </div>

   <script>

   var vm = new Vue({

     el: '#app',

     data: {

       classObject: {

         //'class-a',不能写成class-a（不带引号）；这里的classObject是js对象，而class-b是代表的是一个样式，所以必须写成'class-a',用引号括起来。

         //否则这里的class-a只能代表classObject的一个属性名称而已，这样vuejs在初始化时，会报错。

         'class-a':true,

         'class-b': false

       }

     }

   });

   </script>

 </body>  

 </html>

vuejs中v-bind绑定class时的注意事项的更多相关文章

  1. jQuery中的bind绑定事件与文本框改变事件的临时解决方法

    暂时没有想到什么好的解决办法,我现在加了个浏览器判断非ie的话就注册blur事件,这样有个问题就是blur实在别的控件活动焦点的时候,txtStation控件注册的方法是为了填充它紧挨着的一个下拉列表 ...

  2. mybatis动态sql中的bind绑定

    知识点:bind在模糊查询中的用法 在我的博客    mybatis中使用mysql的模糊查询字符串拼接(like) 中也涉及到bind的使用 <!-- List<Employee> ...

  3. Service官方教程(9)绑定服务时的注意事项

    Binding to a Service Application components (clients) can bind to a service by calling bindService() ...

  4. WPF 使用XML作为绑定源时Xaml注意事项

    直接在xaml定义时xml时应该注意的! xml数据 <?xml version="1.0" encoding="utf-8"?> <Stri ...

  5. C++中getline()和cin()同时使用时的注意事项

    今天做tju的oj,遇到一个问题,想前部分用cin函数一个一个的读入数据,中间部分利用getline()一起读入一行,但是测试发现,cin之后的getline函数并无作用,遂谷歌之.原来cin只是在缓 ...

  6. Python中正则匹配使用findall时的注意事项

    在使用正则搜索内容时遇到一个小坑,百度搜了一下,遇到这个坑的还不少,特此记录一下. 比如说有一个字符串  "123@qq.comaaa@163.combbb@126.comasdf111@a ...

  7. mybatis中使用where in查询时的注意事项

    我使用的时候collection值为mapper的参数名如:int deleteRoleByUserIds(@Param("userIds") String[] userIds); ...

  8. 背水一战 Windows 10 (21) - 绑定: x:Bind 绑定, x:Bind 绑定之 x:Phase, 使用绑定过程中的一些技巧

    [源码下载] 背水一战 Windows 10 (21) - 绑定: x:Bind 绑定, x:Bind 绑定之 x:Phase, 使用绑定过程中的一些技巧 作者:webabcd 介绍背水一战 Wind ...

  9. 浅谈Jquery中的bind(),live(),delegate(),on()绑定事件方式

    前言 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能 ...

随机推荐

  1. 3月23 格式布局及relative

    主要是针对格式布局的一些内容: 1:position:fix 锁定位置(相对于浏览器的位置),例如网上弹出的一些广告 <style type="text/css"> # ...

  2. react中直接调用子组件的方法（非props方式）

    我们都知道在 react中,若要在父组件调用子组件的方法,通常我们会采用在父组件定义一个方法,作为props转给子组件,然后执行该方法,可以获取到子组件传回的参数以得到我们的目的. 显而易见,这个执行 ...

  3. Python的time和datetime

    #python中时间日期格式化符号 %y 两位数的年份表示(00-99) %Y 四位数的年份表示(000-9999) %m 月份(01-12) %d 月内中的一天(0-31) %H 24小时制小时数( ...

  4. 把旧系统迁移到.Net Core 2.0 日记 (12) --发布遇到的问题

    1. 开发时是在Mac+MySql, 尝试发布时是在SQL2005+Win 2008 (第一版) 在Startup.cs里,数据库连接要改,分页时netcore默认是用offset关键字分页, 如果用 ...

  5. Utf-8+Bom编码导致的读取数据部分异常问题

    项目中经常会有这种场景,在配置文件中配置对应关系,项目启动的时候从中读取数据存入map缓存起来,这样使用的时候就可以直接从map找到对应的映射关系. 然后遇到了这么一个诡异的问题,一个简单的映射关系如 ...

  6. Mysql按日期分组（group by）查询统计的时候，没有数据补0的解决办法

    转载自:http://blog.csdn.net/jie11447416/article/details/50887888 1.案例中的数据结构和数据如下 2.在没有解决的时候,是这样的   SELE ...

  7. js 求select option 的值和对应option的内容

    <select onChange="aa(this)" name="a"> <option value="a">1& ...

  8. react router @4 和 vue路由 详解(五)react怎么通过路由传参

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 7.react怎么通过路由传参? a.通配符传参(刷新页面数据不丢失) //在定义路由的 ...

  9. C++解析四-友员函数、内联函数、静态成员

    友元函数 类的友元函数是定义在类外部,但有权访问类的所有私有(private)成员和保护(protected)成员.尽管友元函数的原型有在类的定义中出现过,但是友元函数并不是成员函数.友元可以是一个函 ...

  10. css 中的grid布局基础

    CSS Grid Layout为CSS引入了一个二维网格系统.网格可用于布局主要页面区域或小型用户界面元素. 网格是一组交叉的水平和垂直线 - 一组定义列,其他行.元素可以放在网格上,以行或者列为标准 ...