关于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. 笔记react router 4（三）

    上一篇我们说到了路由组件的嵌套.想必你已经运用自如了.那么,这一次我们来聊一聊4.X中Router的变更. 在3.X中我们若使用路由的模式,可通过在Router上配置history的值即可. 例如, ...

  2. leetcode-algorithms-6 ZigZag Conversion

    leetcode-algorithms-6 ZigZag Conversion The string "PAYPALISHIRING" is written in a zigzag ...

  3. MAC常用软件工具(随某人个人版)

    1.mac命令行工具(自带升级版) https://ohmyz.sh/ 连接远程服务器地址: 直接输入 ssh -A -p 22 root@IP 如:ssh -A -p 22 root@www.bai ...

  4. PHP如何自定义PHP内置函数

    其实对于PHP程序员,有个纯PHP的解决方案.在php.ini里有个配置项 auto_prepend_file,可以设置一个PHP文件作为每次执行前自动加载的文件. 在这个文件里写函数,你就可以当成定 ...

  5. [LeetCode] 191. Number of 1 Bits ☆(位 1 的个数)

    描述 Write a function that takes an unsigned integer and return the number of '1' bits it has (also kn ...

  6. python dpkt 解析 pcap 文件

    dpkt Tutorial #2: Parsing a PCAP File 原文链接:https://jon.oberheide.org/blog/2008/10/15/dpkt-tutorial-2 ...

  7. webpack+typescript

    1. npm install --save typescript 2. npm install --save ts-loader webpack.config.js module.exports = ...

  8. 逆袭之旅DAY16.东软实训.Oracle.索引

    2018-07-12 14:44:27 四.索引1.创建索引手动创建:create index 索引名 on 表名(列名,[列名,...])create table employee(pno numb ...

  9. Win10系列：VC++ Direct3D模板介绍1

    Visual Studio为开发Direct3D应用程序提供了便捷的模版,读者可以不必手动去新建Direct3D中所使用到的基础资源,而只需专注于图形的绘制.本小节主要为读者介绍这个模版中用于绘制图形 ...

  10. Python Django 之 登录页面

    一.创建project与app 1.创建project与app django-admin startproject mysite_login python manage.py startapp log ...