关于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. mysql 8.0.12 修改root密码

    use mysql: ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '新密码'; FLUSH PRIVI ...

  2. 整合多个网络的拓扑结构并降维（Mashup）

    整合多个网络的拓扑结构并降维(Mashup) 介绍一个整合多个网络拓扑结构的方法,方法来源:Compact Integration of Multi-Network Topology for Func ...

  3. 网络编程socketserver实现并发

    import socketserver import struct import json import os class FtpServer(socketserver.BaseRequestHand ...

  4. [luogu P3275] [SCOI2011]糖果

    [luogu P3275] [SCOI2011]糖果 题目描述 幼儿园里有N个小朋友,lxhgww老师现在想要给这些小朋友们分配糖果,要求每个小朋友都要分到糖果.但是小朋友们也有嫉妒心,总是会提出一些 ...

  5. vijos 1512 SuperBrother打鼹鼠

    背景 SuperBrother在机房里闲着没事干(再对比一下他的NOIP,真是讽刺啊......),于是便无聊地开始玩“打鼹鼠”...... 描述 在这个“打鼹鼠”的游戏中,鼹鼠会不时地从洞中钻出来, ...

  6. ActiveMQ topic 普通订阅和持久订阅

    直观的结果:当生产者向 topic 发送消息, 1. 若不存在持久订阅者和在线的普通订阅者,这个消息不会保存,当普通订阅者上线后,它是收不到消息的. 2. 若存在离线的持久订阅者,broker 会为该 ...

  7. CentOS下安装MYSQL8.X并设置忽略大小写

    安装 在官网上下载:mysql80-community-release-el7-2.noarch.rpm.安装方式与5.7基本相同.详细安装过程见:CentOS下安装mysql5.7和mysql8.x ...

  8. [转载] C++ STL中判断list为空，size()==0和empty()有什么区别

    关于两个的区别,首先size()==0为bool表达式,empty()为函数调用,这一点很明显.查看源代码, bool empty() const { return _M_node->_M_ne ...

  9. java实现按中文首字母排序的方式

    public class ABD { public static void main(String[] args) { //Collator类是用来执行区分语言环境的String比较的,这里是选择CH ...

  10. requests（第三方模块） 请求、登录、下载网页

    import requests  #http://docs.python-requests.org/en/latest/api/ 说明文档 ''' requests.request(method,ur ...