在 Vue 里绑定样式属性可以使用 v-bind:class="" 和 v-bind:style="" , 二者都可以接受 变量 / 数组 / 对象. 不同点是 v-bind:class 里面绑定变量的值是 class , 指向对应的 类选择器 样式表, 而 v-bind:style 里面绑定的变量的值是一个以 css 属性名 为 键名, 以 css 属性值 为键值 的 键值对, 这种键值对需要以 对象 的形式传进去, 也可以使用 数组 将多个 样式表对象 传进去. 以下简单展示了两种使用方法实现同样效果.

:class

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  6.   <title>Vue Test</title>
  7.   <style>
  8.       .style1 {
  9.           width: 100px; height: 100px; background-color: tomato;
  10.       }
  11.       .style2 {
  12.           margin: 0 auto;
  13.           border-radius: 15px;
  14.       }
  15.   </style>
  16. </head>
  17. <body>
  18.     <div id="app">
  19.         <div v-bind:class="{style1,style2}"></div>
  20.     </div>
  21.     <script>
  22.         var vApp = new Vue({
  23.             el: "#app",
  24.             data: {
  25.                 style1: "style1",
  26.                 style2: "style2"
  27.             }
  28.         })
  29.     </script>
  30. </body>
  31. </html>

:style

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  6.   <title>Vue Test</title>
  7.   <style>
  8.       .style1 {
  9.           width: 100px; height: 100px; background-color: tomato;
  10.       }
  11.       .style2 {
  12.           margin: 0 auto;
  13.           border-radius: 15px;
  14.       }
  15.   </style>
  16. </head>
  17. <body>
  18.     <div id="app">
  19.         <div v-bind:style="[style1,style2]"></div>
  20.     </div>
  21.     <script>
  22.         var vApp = new Vue({
  23.             el: "#app",
  24.             data: {
  25.                 style1: {
  26.                     "width": "100px",
  27.                     "height": "100px",
  28.                     "background-color": "tomato"
  29.                 },
  30.                 style2: {
  31.                     "margin": "0 auto",
  32.                     "border-radius": "15px"
  33.                 }
  34.             }
  35.         })
  36.     </script>
  37. </body>
  38. </html>

效果

怎样在 Vue 里面绑定样式属性 ?的更多相关文章

  1. 013——VUE中多种方式使用VUE控制style样式属性

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. vue v-bind绑定属性和样式

    这期跟大家分享的,是v-bind指令.它可以往元素的属性中绑定数据,也可以动态地根据数据为元素绑定不同的样式. 绑定属性 最简单的例子,我们有一张图片,需要定义图片的src.我们可以直接在元素的属性里 ...

  3. 3-5 Vue中的样式绑定

    Vue中的样式绑定: 本案例,简单设计一个<div>的点击绑定事件来改变div的样式效果 方法一:[class] ①(class和对象的绑定) //如上,运用class和一个对象的形式来解 ...

  4. Vue.js：样式绑定

    ylbtech-Vue.js:样式绑定 1.返回顶部 1. Vue.js 样式绑定 Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v- ...

  5. vue绑定样式

    使用三目运算符绑定样式 本来以为使用vue模版写法,在绑定单个样式,也就是一个class类名的时候可以直接书写,就像这样 <div id="app"> <div ...

  6. vue.js（7）--vue中的样式绑定

    vue中class样式与内联样式的绑定 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  7. vue 绑定样式的几种方式

    vue 绑定样式 对象语法 1.v-bind:class设置一个对象,动态切换class <div :class="{'active':isActive}">xxx&l ...

  8. vue中v-bind绑定样式

    近来发现v-bind绑定样式的两个好玩的栗子 可以直接绑定到一个样式对象,让模板更清晰: <div id="app"> <div v-bind:style=&qu ...

  9. vue中的js绑定样式

    添加class 对象形式添加   activated为true时p标签的class为activated false时为空 <div id="app"> <p :c ...

随机推荐

  1. 【分类模型评判指标 一】混淆矩阵(Confusion Matrix)

    转自:https://blog.csdn.net/Orange_Spotty_Cat/article/details/80520839 略有改动,仅供个人学习使用 简介 混淆矩阵是ROC曲线绘制的基础 ...

  2. H5最佳格式

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

  3. np数组转换函数

    1.多维数组降为一维: a = np.arange(24) np.ravel(a)或者a.ravel a.flatten 2.数据类型转换 a = a.astype(np.float32) //tf是 ...

  4. android studio最新版的安装和配置（3.1.2）

    android studio最新版的安装和配置(3.1.2) 下载地址: android studio:http://www.android-studio.org/ JDK:http://www.or ...

  5. Oracle 报错 ORA-03290的处置

    MySql 的tuancate命令是直接truncate tableName,但在Oracle需要写成truncate table tableName,改正就好了. --END-- 2019.10.1 ...

  6. linux服务之redis

    redis wget http://download.redis.io/releases/redis-4.0.6.tar.gzcd redis-4.0.6makecd src/./redis-serv ...

  7. ansible简单入门

    1,结构框架 Ansible 使用的是无代理体系结构,这种体系结构可以通过防止节点轮询控制机器来减少网络开销.Ansible 提供的结果框架如下所示: Ansible :运行在中央计算机上: Conn ...

  8. 用Python解方程

    一元一次方程 例题1: 这是北师大版小学六年级上册课本95页的一道解方程练习题: 大家可以先口算一下,这道题里面的x的值为200 接下来我们用python来实现,代码如下,每一句代码后面都写有解释语: ...

  9. 【转】ffluos编译

    FluffOS是在MUDOS基础上更新完成的.进行了许多新功能和bug修复. 针对LPC有很好的兼容性,如果你的MUD运行MUDOS V22+版本,可以很容易运行在fluffos上. 系统环境: Cn ...

  10. Java集合(6)：理解Map

    映射表的基本思想是维护键-值对的关联,通过键来寻找值.下面是标准Java类库中几种Map的实现: (1) HashMap:Map基于散列表的实现,插入和查询键值对的开销是固定的.可以通过构造器设置容量 ...