普通的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. Mac上安装PHP、Apache、MySQL

    Mac自带php5.6版本,要升级到php7.3 步骤如下 1,brew 安装php ,如果没有安装,访问https://brew.sh/index_zh-cn安装在终端输入以下内容,不用指定安装ph ...

  2. [LeetCode] 704. Binary Search_Easy tag: Binary Search

    Given a sorted (in ascending order) integer array nums of n elements and a target value, write a fun ...

  3. phpstudy安装redis

    php安装扩展,首先要在php官网下载相应的库文件, http://pecl.php.net/package/redis 下载相应版本的文件,首先phpinfo()看看当前的php环境版本等等   我 ...

  4. cocos2d-x JS 利用重复动作实现动画播放(实现倒计时)

    cocos2d-js: cc.delayTime() and cc.repeatForever() don't work together in cc.sequence() this.numm = 1 ...

  5. Uncaught DOMException: Blocked a frame with origin "http://localhost

    ajaxFileUpload上传时报错 :Uncaught DOMException: Blocked a frame with origin "http://localhost..... ...

  6. 连接mysql && ERROR 2003 (HY000): Can't connect to MySQL server on 'localhost' (10061)

    上一篇:mysql服务正在启动 mysql服务无法启动 && mysql启动脚本 mysql关闭脚本 此篇目编写一个核心目的: 1.mysql连接 先抛出一个问题 这是因为mysql服 ...

  7. CSU 1862 The Same Game(模拟)

    The Same Game [题目链接]The Same Game [题目类型]模拟 &题解: 写这种模拟题要看心态啊,还要有足够的时间,必须仔细读题,一定要写一步,就调试一步. 这题我没想到 ...

  8. VScode编辑器个性化配置

    一.设置方法 “文件” - > “首选项” -> "设置" 二.字体大小和缩进 "editor.tabSize": 2, "editor. ...

  9. Android -- 打造我们的StepView

    1,前两天我们分析了Github开源的StepView <自定义StepView实现个人信息验证进度条>,这两天想着想自己写一个,so,就有了这一篇文章,不废话,先看看实现的效果: 2,首 ...

  10. Python记录3：集合

    #一,集合类型###找出两个集合的交集并将结果打印出来# python_stu=['egon','alex','kevin','王大炮','李二丫']# linux_stu=['张铁蛋','刘铜蛋', ...