普通的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. DLNg-CNN第一周

    1.边缘检测示例 *表示卷积操作,标准表示.使用3*3的过滤器对其进行卷积,将3*3的覆盖在左侧上,并将运算结果相加:第二步将窗口向右移动一个单位,进行计算...横向之后再将窗格下移一个,进行循环.. ...

  2. [LeetCode] 584. Find Customer Referee_Easy tag: SQL

    Given a table customer holding customers information and the referee. +------+------+-----------+ | ...

  3. Tensorflow 搭建神经网络及tensorboard可视化

    1. session对话控制 matrix1 = tf.constant([[3,3]]) matrix2 = tf.constant([[2],[2]]) product = tf.matmul(m ...

  4. Express web框架 upload file

    哈哈,敢开源,还是要有两把刷子的啊 今天,看看node.js 的web框架 Express的实际应用 //demo1 upload file <html><head><t ...

  5. POJ 3461 Oulipo(模式串在主串中出现次数 可重叠)

    Oulipo [题目链接]Oulipo [题目类型]KMP &题意: 给你两个字符串p和s,求出p在s中出现的次数. &题解: kmpC函数就是解题的,其中也就j=nex[j]难理解一 ...

  6. Android -- GreenDao3.2的简单使用

    1,最近看了一篇文章关于GreenDao的文章 ,感觉使用这个操作数据库还是很好用的,帮我们省了不少的查询代码,今天就和大家一起来简单的使用一下吧.首先这是官网地址:https://github.co ...

  7. Support For C++11/14/17 Features (Modern C++)

    Visual Studio编译器对 C++11 特性的支持 具体参考网址:https://msdn.microsoft.com/en-us/library/hh567368.aspx 截至目前为止,V ...

  8. python多线程，多进程编程。

    进程,是目前计算机中为应用程序分配资源的最小单位: 线程,是目前计算机中运行应用程序的最小单位: 在实际系统中,其实进程都是被分为线程来实现的,所以参与时间片轮转的是线程: 但是管理应用程序的资源的单 ...

  9. kail linux arp欺骗

    首先连接wifi,进入内网 1,查看内网的存活主机  命令  fping -asg 192.168.1.0/24    (视不同环境而定,假设这里的路由器地址为 192.168.1.1) 也可利用其他 ...

  10. 使用js调用js

    直接上源码: <div class="choose"> choose a mode<br> <hr> <button type=" ...