普通的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. keras后端设置【转载】

    转自:https://keras.io/backend/ At this time, Keras has three backend implementations available: the Te ...

  2. wue父子通信和动态路由 还有点击事件直接赋值传参数

    这种直接在后面赋值 传值

  3. [LeetCode] 129. Sum Root to Leaf Numbers_Medium tag: DFS

    Given a binary tree containing digits from 0-9 only, each root-to-leaf path could represent a number ...

  4. apache分割数组和集合的分法

    public static void main(String[] agrs){    String[] array={"1","2","", ...

  5. visual studio Lua 调试

    BabeLua是一款基于VS (简称VS)的免费开源的Lua集成开发环境,在Lua编辑和调试方面,具有如下功能和特性: ●Lua语法高亮 ●语法检查 ●自动补全 ●一键注释 ●格式化代码 ●自定义代码 ...

  6. Amber TUTORIAL B5: Simulating the Green Fluorescent Protein

    Section 1: Preparing the PDB file 1EMA是本次教程所用的pdb,可以在PDB数据库下载. pdb4amber -i 1EMA.pdb -o gfp.pdb --dr ...

  7. ubuntu下ldd,查看程序动态库信息

    ldd  list, dynamic, dependencies linux-vdso.so. => (0x00007ffe9d9b6000) libstdc++.so. => /usr/ ...

  8. vim自动安装插件Vundle

    https://github.com/VundleVim/Vundle.vim Set up Vundle: git clone https://github.com/VundleVim/Vundle ...

  9. 记工作中用到的抓取oracle表结构的sql语句

    以下是SQL,生成的结果中是否为主键和是否可为空,是不准确的 ,没有关联相关的系统表: select '' as 业务源系统, t2.TABLE_NAME 表名称, nvl(t3.comments,' ...

  10. Android开发随笔记_1

    1):android:configChanges="keyboardHidden|orientation":配置的好处:一般在AndroidManifest.xml文件中都没有使用 ...