关于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. DBWritable的使用

    首先导入mysql连接驱动jar包 或者maven模式下在pom.xml文件中追加: <dependency> <groupId>mysql</groupId> & ...

  2. GitHub C 和 C++ 开源库的清单（含示例代码）

    内容包括:标准库.Web应用框架.人工智能.数据库.图片处理.机器学习.日志.代码分析等. 标准库 C++标准库,包括了STL容器,算法和函数等. C++ Standard Library:是一系列类 ...

  3. hdu-3671-tarjin/割点方案

    http://acm.hdu.edu.cn/showproblem.php?pid=3671 给出一幅无向图,询问有多少种移除点对的方案使得剩下的连通分量个数大于1. 和上一题差不多的思路直接做n次t ...

  4. js 处理 cookie的存储与删除

    <script> //JS操作cookies方法! //写cookies function setCookie(c_name, value, expiredays){ var exdate ...

  5. UI基础三：简单的BOL报表开发

    巧了...刚好一个需求,就直接来撸起来吧. 需要做一个报表: 1.创建查询结构和结果结构 2.创建实施类: SE24创建ZCL_JPEXPORT_ORDER_IL 更改父类:CL_WCF_GENIL_ ...

  6. npm常用功能

    1.   npm -v在命令行中输入该代码,可以查看npm当前版本号 2.安装依赖包2.1  npm install <name>先使用cd命令跳转到需要安装模块的目录,在该目录下执行np ...

  7. FJUT16级第一周寒假作业题解G题

    题目链接:http://210.34.193.66:8080/vj/Contest.jsp?cid=160#P6 涨姿势题1 TimeLimit:1000MS  MemoryLimit:128000K ...

  8. rsyslog的配置文件使用方法

    参考地址: http://www.rsyslog.com/doc/v8-stable/configuration/property_replacer.html rsyslog消息模板的定义规则 &qu ...

  9. iptables增加、删除、修改、查询、保存防火墙策略教程

    一.查看现有防火墙策略 iptables -L -n iptables -L -n --line-number #--line-number参数会显示策略编号,该编号在删除策略时使用 二.增加防火墙策 ...

  10. QPainter使用不同风格的QBrush来填充区域

    效果图: void WgtText::paintEvent(QPaintEvent *event) { QPainter painter(this); painter.setRenderHint(QP ...