关于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并行执行--缩短主从同步时延

    https://www.w3cschool.cn/architectroad/architectroad-mysql-parallel-copy.html 三.结尾 从mysql并行复制缩短主从同步时 ...

  2. 【CSS】【1】让DIV中的文字换行显示

    <div style="white-space:normal;word-break:break-all;word-wrap:break-word;">data</ ...

  3. React Router页面传值的三种方法

    文章地址:https://blog.csdn.net/qq_23158083/article/details/68488831

  4. 字符串加密解密（Base64）

    var Base64 = { // private property _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwx ...

  5. mybatis的update使用选择

    更新后台设置时,会分多个页面更新同一个表中的数据,愿想是尽量减少sql请求数据量并且减少重复代码. 比如博客园的: 假如只有一个用户信息表,这样的话每个页面只更新部分字段. 这种情况下的更新推荐在xm ...

  6. python 解析与生成xml

    xml.etree.ElementTree模块为xml文件的提取和建立提供了简单有效的API.下文中使用ET来代表xml.etree.ElementTree模块. XML是一种内在的分层的数据形式,展 ...

  7. js正则匹配以某字符串开始字符串

    let decode_sql ="select * from table where create_user='user' order by id desc";   decode_ ...

  8. Qt与JS（三）

    Qt不错的学习网址: http://www.cnblogs.com/findumars/p/5529526.html ----------------------------------------- ...

  9. 码云git使用三(本地代码合并)

    现在我们已经学会了把“本地代码上传至码云git服务器”和“从码云git服务器下载代码到本地”. 我们现在学习怎么上传代码到服务器注意事项和步骤. 1.我们修改代码后,我们需要先+Add后再Commit ...

  10. DDOS 攻击的防范

    ddos 攻击介绍 可以看下面的文章 http://www.ruanyifeng.com/blog/2018/06/ddos.html 下面转自:  http://www.escorm.com/arc ...