在 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. HTTP缓存机制和原理

    前言 Http 缓存机制作为 web 性能优化的重要手段,对于从事 Web 开发的同学们来说,应该是知识体系库中的一个基础环节,同时对于有志成为前端架构师的同学来说是必备的知识技能.但是对于很多前端同 ...

  2. Remote Ubuntu VM from Windows

    Need to install the xrdp tool on Ubuntu. To do this, open a Terminal window (Ctrl + Alt + T) and ent ...

  3. leetcode-hard-array-179 Largest Number-NO

    mycode  写的很复杂,还报错... 参考: class Solution: # @param {integer[]} nums # @return {string} def largestNum ...

  4. 前端知识点回顾——Javascript篇(四)

    Symbol 为什么需要symbol ES5里面对象的属性名都是字符串,如果你需要使用一个别人提供的对象,你对这个对象有哪些属性也不是很清楚,但又想为这个对象新增一些属性,那么你新增的属性名就很可能和 ...

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

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

  6. 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_2-1.快速搭建SpringBoot项目，采用Eclipse

    笔记 1.快速搭建SpringBoot项目,采用Eclipse     简介:使用SpringBoot start在线生成项目基本框架并导入到eclipse中 1.站点地址:http://start. ...

  7. IPv4 ping命令

    IPv4 ping命令 一.Linux操作系统 给一台 Linux 主机分配了一个 IPv4 的 IP地址,如何使用 ping命令 确定该 IP地址 能否 ping 通呢? 1.查看主机的 IPv4 ...

  8. 手写web框架之实现Bean容器

    实现Bean容器    使用ClassHelper可以获取所加载的类,但无法通过类来实例化对象,因此我们需要提供一个反射工具类,让它封装java反射相关的API,对外提供更好用的工具方法.将该类命名为 ...

  9. 新股定价谁说了算？一文读懂中国IPO询价制度

    总体来说,在市场化条件下,确定股票首次公开发行的价格可以分为两个步骤:一是股票估值:选择一定的股票估值模型,对拟发行股票的公司进行估值,并初步确定发行价格和询价区间:二是发现股票市场价格,主要方式是I ...

  10. Django：（04）状态保持和验证

    一.Cookie 特点 ​ Cookie是由服务器(网站)生成的,存储在浏览器端的 键值对数据(通常经过加密) 在响应请求时,服务器会把生成 Cookie数据 发给浏览器,浏览器会自动保存 (前提:浏 ...