在 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. Dubbo API 笔记——Dubbo架构与使用

    转载于: https://blog.csdn.net/benhuo931115/article/details/78457149 架构演变 单一应用架构 所有功能部署在一个应用上,用于简化增删改查工作 ...

  2. win10系统配置FTP

    FTP是一种远程传输协议,支持这种协议的就是FTP服务器.我们可以在自己的PC机上创建一个.然后通过网页就可以访问FTP服务器下的文件夹. 搭建过程 1.首先需要开启FTP服务.在菜单中打开控制面板. ...

  3. centOS7搭建hadoop，zookeeper，hbase

    1.配置ssh免密登录 (本人使用的是centOS7虚拟机) (本人未在root用户下安装,建议使用root用户,不然很麻烦!!) ① 本机无密钥登录 1.进入~/.ssh目录(若无,则执行一次ssh ...

  4. flutter常用内置动画组件

    文章目录 AnimatedContainer AnimatedCrossFade Hero AnimatedBuilder DecoratedBoxTransition FadeTransition ...

  5. vs2017+opencv配置参考链接

    本人通过以下几篇博客完成vs2017+opencv3.4.1的配置: OpenCV 3.4.1 + VS2017 开发环境搭建 - 简书 WIN10下 VS2017+OpenCv 3.4.1 配置 - ...

  6. 微信小程序入门---记事本增---删

    第一.如何获取input框的值(form表单提交除外) bindinput事件 <input type='text' placeholder="请输入内容" placehol ...

  7. JVM菜鸟进阶高手之路一[z]

    https://mp.weixin.qq.com/s/qD1LFmsOiqZHD8iZX97OfA? 问题现象 代码如下,使用 ParNew + Serial Old 回收器组合与使用 ParNew ...

  8. Springboot将mybatis替换为mybatis-plus

    知识点: 1.Mybatis-plus相比mybatis,功能更加强大,简而言之,不需要我们去写mapper.xml配置,但是对于特殊需求的sql语句,还是需要写mapper.xml文件中的sql语句 ...

  9. jenkins打开空白页

    1.登录jenkins报错提示hudson.security.AccessDeniedException 解决: 修改Jenkins_home/config.xml文件里面的一段内容改成如下 < ...

  10. 1293 - Incorrect table definition; there can be only one TIMESTAMP column with CURRENT_TIMESTAMP in DEFAULT or ON UPDATE clause

    在数据库执行脚本文件时,执行到一半会遇到  这种问题: 出错处:2018-05-14 18:53:38 行号:712454 错误代码: 1293 - Incorrect table definitio ...