关于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. Spring Boot常用注解

    SpringBoot注解大全   一.注解(annotations)列表 @SpringBootApplication:包含了@ComponentScan.@Configuration和@Enable ...

  2. 牛客练习赛32 A/B/C

    https://ac.nowcoder.com/acm/contest/272/A v<=k时  答案就是k个1 否则贪心的从中间向两边添加1 #include<bits/stdc++.h ...

  3. 关于移动端rem适配

    var num = 1 / window.devicePixelRatio; var fontSize = document.documentElement.clientWidth / 10; doc ...

  4. GSON使用之对特殊字符的转换的处理

    很多人是在转换时特殊字符被替换成了unicode编程格式,而我碰到的类似,只不过是后台转换成json字符串到前端,前端解析时 '' 双引号和 / 斜杠被原样转换,冲突了json的关键字符,导致解析时提 ...

  5. 月日加四位尾数编号生成 VB方式

    <%Private Sub Form_Click()MsgBox "生成两位后缀"ClsFor i = 1 To 99barcod= Format(Right(Year(Da ...

  6. [luogu P2054] [AHOI2005]洗牌

    [luogu P2054] [AHOI2005]洗牌 题目描述 为了表彰小联为Samuel星球的探险所做出的贡献,小联被邀请参加Samuel星球近距离载人探险活动. 由于Samuel星球相当遥远,科学 ...

  7. 基于TcpListerer的web服务器 和 基于HttpListerer的web服务器

    摘自<Asp.Net 本质论>作者:郝冠军 /* 为了简化基于TCP协议的监听程序,.NET在System.Net.Sockets命名空间中提供了TcpListerer类,使用它,在构造函 ...

  8. 【转】EF 获取类的属性并排除特定属性（getType().GetProperties()）

    当获取一个类型(class)的所有属性时,想排除指定属性,该如何操作? 比如:EF中一个实体类型UserEntity,通过反射获取这个类的属性时,想排除这个为映射的字段ID 使用以下方法即可! Pro ...

  9. Qt一步一步实现插件通信（附源码）

      前一章已经实现了主程序调用加载插件功能,这一章描述主程序和插件间通信功能 说道Qt的通信必须要了解信号和槽的机制原理,这里不做论述,不清楚的同学去看看信号和槽机制 不废话直接上步骤,在上一章的基础 ...

  10. 逆袭之旅DAY15.东软实训.Oracle.约束、序列、视图、索引、用户管理、角色

    2018-07-11  08:26:00 有某个学生运动会比赛信息的数据库,保存了如下的表: 运动员sporter表:(运动员编号sporterid,运动员姓名name,运动员性别sex,所属系dep ...