在 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. 预处理、const、static与sizeof-#pragma pack的作用

    1:有如下代码: #include <iostream.h> #pragma pack(1) struct test{ char c; short s1; short s2; int i; ...

  2. Nginx-HTTP之ngx_http_top_header_filter

    1. ngx_http_top_header_filter 该链表主要是用于构造响应消息的消息报头. ngx_http_top_header_filter 单链表有如下模块插入了操作: ngx_htt ...

  3. 2.3 Go语言基础之数组

    本文主要介绍Go语言中数组(array)及它的基本使用. 一.Array(数组) 数组是同一种数据类型元素的集合. 在Go语言中,数组从声明时就确定,使用时可以修改数组成员,但是数组大小不可变化. 基 ...

  4. 理解MyCat分库分表

    1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18.

  5. 快速解决设置Android 23.0以上版本对SD卡的读写权限无效的问题

    快速解决设置Android 23.0以上版本对SD卡的读写权限无效的问题 转 https://www.jb51.net/article/144939.htm 今天小编就为大家分享一篇快速解决设置And ...

  6. Pattern Evaluation

    对相关性patten质量的常用分析指标有以下这些 其中,X^2 跟 lift不是null-invariant的,也就是说当~A~B项较多时,这两个指标不是很可靠. 据Jiawei Han所言,Kulc ...

  7. selenium 常见事件操作

    1.文本框输入内容 from selenium import webdriverdriver = webdriver.Chrome(r"C:\Users\Administrator\Desk ...

  8. 5.Linux文件权限

    Linux用户类别 root:这是系统特权用户类,他们都有访问root登录账号的权限 owner:这是实际拥有文件的用户 group:这是共享文件的组访问权的用户类的用户组名称 world:这是不属于 ...

  9. Python 常用模块(1) -- collections模块,time模块,random模块,os模块,sys模块

    主要内容: 一. 模块的简单认识 二. collections模块 三. time时间模块 四. random模块 五. os模块 六. sys模块 一. 模块的简单认识 模块: 模块就是把装有特定功 ...

  10. 【Zookeeper】利用zookeeper搭建Hdoop HA高可用

    HA概述 所谓HA(high available),即高可用(7*24小时不中断服务). 实现高可用最关键的策略是消除单点故障.HA严格来说应该分成各个组件的HA机制:HDFS的HA和YARN的HA. ...