普通的css引入：

变量引入：

通过定义一个变量fontColor来通过v-bind来进行绑定在h3z的class中

<!--变量引入-->

            <h3 :class="fontColor">Vue</h3>

注意：v-bind后面必须跟一个属性或者一个方法

当然我们也可以通过数组的形式引入多个class：

html:

<!--以数组的形式引入多个-->

            <h3 :class="[fontColor,fontBackgroundColor]">欢迎来到perfect*博客园</h3>

使用json对象的方式，在json中也可以使用多种方式

key是样式的名称，对应的值是一个boolean类型，相当于一个开关

HTML：

<!--使用json方式-->

            <h3 :class="{myColor:flag,myBackgroundColor:!flag}">欢迎来到perfect*博客园</h3>

使用数组+json方式；

html:

<!--使用数组+json方式-->

            <h3 :class="[fontSize,{myColor:flag,myBackgroundColor:flag}]">欢迎来到perfect*博客园</h3>

class中 写的是变量引入和json对象

绑定style：

HTML：

<!--绑定style：-->

            <h3 :style="[colorA,colorB]">欢迎来到perfect*博客园</h3>

可以通过数组引入多个，引入一个时就不需要数组了，同绑定class相同，只是定义变量的值不一样。

以上示例所有代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>v-bind处理style与class</title>

         <script src="../js/vue.js"></script>

         <script>

             window .onload= () =>{

                 new Vue({

                 el:"#one",

                 data:{

                     fontColor:"myColor",

                     fontBackgroundColor:"myBackgroundColor",

                     flag:true,

                     fontSize:"myFontSize",

                     colorA:{color:'rgb(53,73,93)'},

                     colorB:{backgroundColor:'rgb(65,184,131)'}

                 },

                 methods:{

                 }

             });

             }

         </script>

         <style>

         .myColor{

             color: rgb(,,);

             text-align: center;

         }

         .myBackgroundColor{

             background: rgb(,,);

         }

         .myFontSize{

             font-size: 100px;

         }

         </style>

     </head>

     <body>

         <div id="one">

             <!--普通的css引入-->

             <!--<h3 class="myColor">Vue</h3>-->

             <!--变量引入-->

             <!--<h3 :class="fontColor">Vue</h3>-->

             <!--以数组的形式引入多个-->

             <!--<h3 :class="[fontColor,fontBackgroundColor]">欢迎来到perfect*博客园</h3>-->

             <!--使用json方式-->

             <!--<h3 :class="{myColor:flag,myBackgroundColor:!flag}">欢迎来到perfect*博客园</h3>-->

             <!--使用数组+json方式-->

             <!--<h3 :class="[fontSize,{myColor:flag,myBackgroundColor:flag}]">欢迎来到perfect*博客园</h3>-->

             <!--绑定style：-->

             <h3 :style="[colorA,colorB]">欢迎来到perfect*博客园</h3>

         </div>

     </body>

 </html>

使用v-bind处理class与style

使用v-bind处理class与style的更多相关文章

  1. v - bind

    1. 用于处理html标签的动态属性,即动态赋值(动态地绑定一个或多个特性,或一个组件 prop 到表达式) 2. 官网API <!DOCTYPE html> <html lang= ...

  2. v:bind指令对于传boolean值的注意之处

    1,

  3. 浅谈Jquery中的bind(),live(),delegate(),on()绑定事件方式

    前言 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能 ...

  4. 更新补丁Bind

    1.查询补丁版本信息 (1) rpm -qa|grep bind (2) dig @localhost version.bind 2.下载安装 BIND最新漏洞和升级解决办法 现在有非常多的公司的都有 ...

  5. Bind开启IPv6功能

    [root@localhost sbin]# ./named -v bind 9.5.1-p3-v3.0.9 1,服务器开启IPv6服务 网卡配置v6地址 [root@localhost ~]# if ...

  6. 在Resource中使用x:Bind

    Build2015上,MS热情高涨的演示了x:Bind,一种新的Binding方式,新的方式有如下优点: 1更好的性能(内存占用,CPU占用) 2BuildTime的Binding 具体在Channe ...

  7. JavaScript（六）——实现图片上下或者左右无缝滚动

    /*! jQuery v1.8.3 jquery.com | jquery.org/license */ (function(e,t){function _(e){var t=M[e]={};retu ...

  8. 通过百度echarts实现数据图表展示功能

    现在我们在工作中,在开发中都会或多或少的用到图表统计数据显示给用户.通过图表可以很直观的,直接的将数据呈现出来.这里我就介绍说一下利用百度开源的echarts图表技术实现的具体功能. 1.对于不太理解 ...

  9. JavaScript----marquee滚动标签 图片无缝滚动 插入百度地图

    页面的自动滚动效果,可由javascript来实现, 但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee ...

  10. marquee滚动，无缝连接的代码

    页面的自动滚动效果,可由javascript来实现, 但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee ...

随机推荐

  1. [LeetCode] 860. Lemonade Change_Easy tag: Greedy

    At a lemonade stand, each lemonade costs $5. Customers are standing in a queue to buy from you, and ...

  2. matplotlib画的图保存为emf格式

    在用matplotlib保存图片时,发现不能直接保存为emf格式.百度有人说要先另存为svg格式,再使用INKSCAPE软件转换成emf格式.我试了一下,发现还是不行,后来,发现先用matplotli ...

  3. sublime使用经验汇总

    1. source insight 会对某个修改频繁的文件做多次备份.我们用sublime进行多个文件搜索时,需要把备份的文件排除在外. e:\work\code\sourcev, *.h, *.cp ...

  4. vue中实现浏览器的复制功能

    点击复制,就可以实现copy <p class="inline-block"> <span >{{fenxiao.appSecret}}</span& ...

  5. cocos2d-x JS 加载播放Studio帧动画的两种方法

    昨天懵逼的搞了两个多小时(百度无果/没看出什么矛头),自己琢磨总算搞出来了   1.  var levelUpJson = ccs.load("res/LevelUp.json") ...

  6. QT 添加 lib库

    扒自网友文章: 一.添加第三方的头文件 首先,添加头文件  #include "ControlCAN.h" 然后,再将这个头文件放到工程的目录下 二.添加.lib文件 首先,将.l ...

  7. python将目录切换为脚本所在目录

    os.chdir(os.path.abspath(os.path.dirname(sys.argv[0])))

  8. java中的锁之AbstractQueuedSynchronizer源码分析（一）

    一.AbstractQueuedSynchronizer类介绍. 该抽象类有两个内部类,分别是静态不可继承的Node类和公有的ConditionObject类.AbstractQueuedSynchr ...

  9. uvm设计分析——report

    uvm_report实现中的类图,如下: 1)uvm_component均从uvm_report_object extend而来,其中定义了report_warning,error,info,fata ...

  10. 在统一软件开发过程中使用UML

    如何在统一软件开发过程中使用UML? 起始阶段常用UML图 在起始阶段,通常有用例图.类图.活动图.顺序图等UML图的参与. 获取用户需求之后首先要将这些需求转化为系统的顶层用例图. 在确定了用例之后 ...