近来发现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. openfire服务器开发环境搭建

    2017-07-26 更新:直接获取最新版源码,就不会报错了,而且可支持的插件多,老版本的openfire几乎没有可用的官方插件. 系统及软件环境: MAC OSX EI Capitan 10.11. ...

  2. 深入V8引擎-枚举+位运算实现参数配置

    不知不觉都快月底了,看了看上一篇还是6号写的,惭愧惭愧,说好的坚持.为了证明没有偷懒(其实还是沉迷了一会dota2),先上一个图自证清白. 基本上从初始化引擎,到Isolate.handleScope ...

  3. css--offsetParent

    offsetParent属性返回一个对象的引用,这个对象是距离调用offsetParent的元素最近的(在包含层次中最靠近的),并且是已进行过CSS定位的容器元素. 如果这个容器元素未进行CSS定位, ...

  4. logback个人使用配置

    提供一个目前个人供词使用的,无需日志汇总的日志配置文件: <?xml version="1.0" encoding="UTF-8"?> <co ...

  5. Poj 1936,3302 Subsequence(LCS)

    一.Description(3302) Given a string s of length n, a subsequence of it, is defined as another string ...

  6. GSM/GPRS操作示例

    A6(GPRS)  博文转自安信科技: http://wiki.ai-thinker.com/gprs/examples 1.电话接收 相关指令 ATDxxxxx;//xxx为电话号码 示例 打电话 ...

  7. VS Code：快捷方式

    转于:vscode: Visual Studio Code 常用快捷键 博主:魚魚 更多操作参见官网:https://code.visualstudio.com/docs/getstarted/key ...

  8. SVN客户端下载和Svn visual studio插件

    1.Visual SVN Visual SVN visual studio插件 https://www.visualsvn.com/vis... 2.TortoiseSVN SVN客户端下载 http ...

  9. 【java并发编程艺术学习】（二）第一章 java并发编程的挑战

    章节介绍 主要介绍并发编程时间中可能遇到的问题,以及如何解决. 主要问题 1.上下文切换问题 时间片是cpu分配给每个线程的时间,时间片非常短. cpu通过时间片分配算法来循环执行任务,当前任务执行一 ...

  10. pycharm ubuntu安装

    https://www.cnblogs.com/iamjqy/p/7000874.html