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

:class

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

  <title>Vue Test</title>

  <style>

      .style1 {

          width: 100px; height: 100px; background-color: tomato;

      }

      .style2 {

          margin: 0 auto;

          border-radius: 15px;

      }

  </style>

</head>

<body>

    <div id="app">

        <div v-bind:class="{style1,style2}"></div>

    </div>

    <script>

        var vApp = new Vue({

            el: "#app",

            data: {

                style1: "style1",

                style2: "style2"

            }

        })

    </script>

</body>

</html>

:style

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

  <title>Vue Test</title>

  <style>

      .style1 {

          width: 100px; height: 100px; background-color: tomato;

      }

      .style2 {

          margin: 0 auto;

          border-radius: 15px;

      }

  </style>

</head>

<body>

    <div id="app">

        <div v-bind:style="[style1,style2]"></div>

    </div>

    <script>

        var vApp = new Vue({

            el: "#app",

            data: {

                style1: {

                    "width": "100px",

                    "height": "100px",

                    "background-color": "tomato"

                },

                style2: {

                    "margin": "0 auto",

                    "border-radius": "15px"

                }

            }

        })

    </script>

</body>

</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. hadoop用户和权限

    当前Apache Hadoop认证(authentication)支持simple和kerberos,simple是默认的,其实是信任操作系统的认证结果(也就是直接使用操作系统的用户).kerbero ...

  2. 性能测试 | Linux系统top命令中的io使用率，很多人都误解了它的具体含义

    body{ text-align:left; width:80%; margin:10px 100px; } 最近在做连续数据流的缓冲系统,C语言代码实现后,粗略测试了下,功能上应该没有问题.那么,接 ...

  3. 微服务中的CAP定律

    说到微服务,先给大家提一下CAP分布式应用知识吧,无论你微服务使用的是阿里云开源的Dubbo还是基于Springboot的一整套实现微服务的Springcloud都必须遵循CAP定理不然你所实现的分布 ...

  4. go module 使用举例

    go语言中,从1.11开始,引入module,进行版本管理. 通过使用module,工程目录的位置不用必须放在GOPATH下. 本文介绍 module的使用. 下文中用的Go版本是1.13. 1. g ...

  5. <JavaScript>为什么0.1+0.2=0.30000000000000004

    浮点数运算 你使用的语言并不烂,它能够做浮点数运算.计算机天生只能存储整数,因此它需要某种方法来表示小数.这种表示方式会带来某种程度的误差.这就是为什么往往 0.1 + 0.2 不等于 0.3. 为什 ...

  6. WPF学习笔记 - 数据绑定（在代码中）

    在程序代码里,有两种设置绑定的方法,一种是调用FrameworkElement或FrameContentElement对象的SetBinding实例方法. 例如: Public MainWindow( ...

  7. 九十五：CMS系统之cms后台模板渲染

    定义一个宏,用于渲染static文件的时候,只需要传文件名就可以,上下两个“-”是解决渲染的时候源代码换行的情况 {% macro static(filename) -%} {{ url_for('s ...

  8. docker启动cavisor监控

    docker启动cavisor监控 docker run --volume=/:/rootfs:ro --volume=/var/run:/var/run:rw --volume=/sys:/sys: ...

  9. 第四章 信息收集之nmap

    @nmap扫描工具 nmap是使用最广泛的扫描工具,主要的使用范围有,嗅探,扫描,ping. 局域网扫描 nmap扫描的基本命令: 首先在桌面右键选择open in terminal进入命令窗口,输入 ...

  10. python-Web-数据库-oracle

    1.oracle体系结构 --------全局数据库,这里指物理磁盘上的数据库(物理结构,一个真实存在的磁盘目录),一般一台oracle服务器有1个全局数据库,文件占1G多.oracle允许一台 -- ...