近来发现v-bind绑定样式的两个好玩的栗子

可以直接绑定到一个样式对象，让模板更清晰：

<div id="app">

  <div v-bind:style="styleObject">菜鸟教程</div>

</div>

详细栗子：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

</head>

<body>

<div id="app">

  <div v-bind:style="styleObject">菜鸟教程</div>

</div>

<script>

new Vue({

  el: '#app',

  data: {

    styleObject: {

      color: 'green',

      fontSize: '30px'

    }

  }

})

</script>

</body>

</html>

v-bind:style 可以使用数组将多个样式对象应用到一个元素上：

<div id="app">

  <div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>

</div>

详细栗子：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

</head>

<body>

<div id="app">

  <div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>

</div>

<script>

new Vue({

  el: '#app',

  data: {

    baseStyles: {

      color: 'green',

      fontSize: '30px'

    },

    overridingStyles: {

      'font-weight': 'bold'

    }

  }

})

</script>

</body>

</html>

vue中v-bind绑定样式的更多相关文章

  1. vue中的js绑定样式

    添加class 对象形式添加   activated为true时p标签的class为activated false时为空 <div id="app"> <p :c ...

  2. 黑马vue---17、vue中通过属性绑定绑定style行内样式

    黑马vue---17.vue中通过属性绑定绑定style行内样式 一.总结 一句话总结: 如果属性名中带有短线必须加引号,比如: h1StyleObj: { color: 'red', 'font-s ...

  3. 黑马vue---16、vue中通过属性绑定为元素设置class类样式

    黑马vue---16.vue中通过属性绑定为元素设置class类样式 一.总结 一句话总结: 这里就是为元素绑定class样式,和后面的style样式区别一下 vue中class样式绑定方式的相对于原 ...

  4. vue中数据双向绑定的实现原理

    vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...

  5. vue中滚动事件绑定的函数无法调用问题

    问题描述: 一个包含下拉加载的页面,刷新当前页然后滚动页面,能够正常触发滚动事件并调用回调函数,但是如果是进了某一个页面然后再进的该页面,滚动事件能够触发, 但是回调函数在滚动的时候只能被调用一次. ...

  6. vue中如何引入全局样式或方法

    vue中我么会经常用到通用的一些全局的方法,如何左才能实现全局的复用减少代码累赘呢? 我们一般将公用的方法分装再utils.js文件中,然后再main.js主入口文件中将utils.js中的公共的方法 ...

  7. Vue中this的绑定

    之前写过一篇文章 ES6与React中this完全解惑 其实Vue也是相同的道理.在Vue的官方文档中提到: 不要在选项属性或回调上使用箭头函数,比如 created: () => consol ...

  8. Vue中v-for不绑定key会怎样

    Vue的v-for不绑定key,默认行为和绑定key="index"是差不多的,官方没有默认这种行为的情况下,会导致所有列表DOM重新渲染.key="index" ...

  9. vue中修改子组件样式

    一.问题叙述 项目里需要新添加一个表单页面,里面就只是几个select,这个几个select是原本封装好的组件,有自己原本的样式,而这次的原型图却没有和之前的样式统一起来,需要微调一下,这里就涉及到父 ...

  10. Vue中修改组件默认样式

    vue 中直接使用 class 修改组件的默认样式,在使用 scoped 之后,样式是没有效果. 此时可以使用div 包裹组件,deep 可以实现修改组件样式 .lxfix /deep/ .contr ...

随机推荐

  1. linux下导入导出oracle的dmp文件

    1.导出dmp件 命令:exp QGTG/\"QGTG@orcl\" file=/usr/fuck.dmp exp QGTG/\"QGTG@orcl\" fil ...

  2. 树套树Day2

    滚回来更新,,, 在Day1我们学了最基本的线段树套平衡树 Day2开始我们要学习一些黑科技 (所以很大概率会出现Day3 w 1.线段树上的黑科技 这一段我们分几项来讲 1.权值线段树 权值线段树以 ...

  3. mysql调优参考笔记

    之前一位童鞋发的: 5版邮件,在用户量很大的情况下,如果做了分布式,如果在后端mysql上执行:   mysql> show global status like 'Thread%';   Th ...

  4. bzoj 1833: [ZJOI2010]count 数位dp

    题目: 给定两个正整数a和b,求在[a,b]中的所有整数中,每个数码(digit)各出现了多少次. 题解 设\(f[i][j]\)表示长度为\(i\)的所有合法数字中有多少数码\(j\) 设\(g[i ...

  5. Git远程克隆仓库出现Permission denied (publickey)

    $ git clone git@github.com:DavidWanderer/test1.git Cloning into 'test1'... Warning: Permanently adde ...

  6. python 3中使用getattr和*args时， 出现传入参数不一致的问题

    今天在用python3的getattr时遇到一个问题, 就是老提示传入参数和函数前面不一致, 代码为: class Test:      def __init__(self, name):       ...

  7. Poj1062 昂贵的聘礼 （dijkstra算法）

    一.Description 年轻的探险家来到了一个印第安部落里.在那里他和酋长的女儿相爱了,于是便向酋长去求亲.酋长要他用10000个金币作为聘礼才答应把女儿嫁给他.探险家拿不出这么多金币,便请求酋长 ...

  8. DSP基础

    CCS V5的使用 CCS安装与设置

  9. JVM体系结构之二：类加载器

    一．概述 定义:虚拟机把描述类的数据从Class文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的Java类型.类加载和连接的过程都是在运行期间完成的. 二. 类的加载 ...

  10. Python知识点：distutils常用子模块

    from distutils.core import setup, Extension, Commandfrom distutils.command.build import buildfrom di ...