在 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. js判断滚动条是否已到页面最底部或顶部实例

    原文 本文实例讲述了js判断滚动条是否已到页面最底部或顶部的方法.分享给大家供大家参考.具体分析如下: 我们经常会看到很多的网站一个返回顶部效果就是当我们滚动条到指定位置时返回顶部出来了,否则就自动隐 ...

  2. EBS 查看输出HTML报表问题总结

    问题一: 请求输出格式为HTML(如下图,默认浏览器输出),希望 查看输出 的时候能够实现excel输出. 解决方法: 路径:系统管理员/安装/浏览器选项 注:维护如下记录 文件格式:HTML    ...

  3. 简易总结react-hook三大基础

    react-hook的最重要的三大基础 import { useEffect, useState, useContext } from 'react' 1.每一个简单的一句话总结 useEffect ...

  4. ajax设置头信息，读取头信息

    一.设置头信息 jQuery function GetDateForServiceCustomer(userId) { $.ajax({ url: 'http://*******/api/orders ...

  5. 使用Pull解析器生成XML文件

    有些时候,我们需要生成一个XML文件,生成XML文件的方法有很多,如:可以只使用一个StringBuilder组拼XML内容,然后把内容写入到文件中:或者使用DOM API生成XML文件,或者也可以使 ...

  6. Ruby on Rails 的模型 validates 验证

    validate(), 这个方法在每次保存数据时都会被调用.如:def validate if name.blank? && email.blank?  errors.add_to_b ...

  7. 机器学习之Xgboost算法

    知识点 """ xgboost:是一种提升算法,串行的决策树 过程: 第一棵树:目标值:1000 ,预测值:950 第二颗树:目标值:1000-950=50(残差作为输入 ...

  8. 007-Linux 查看端口

    1.使用ss 查看 ss 一般用于转储套接字统计信息.它还可以显示所有类型的套接字统计信息,包括 PACKET.TCP.UDP.DCCP.RAW.Unix 域等. ss -lntpd | grep : ...

  9. 自定义nagios监控脚本---磁盘检测

    自定义nagios监控脚本---磁盘检测 1. 在客户端上创建脚本/usr/local/nagios/libexec/check_disk.shvim /usr/local/nagios/libexe ...

  10. requestLibrary API

    requestLibrary API Keyword Arguments Documentation Create Ntlm Session alias, url, auth, headers={}, ...