近来发现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 syslogd

    /********************************************************************************** * Linux syslogd ...

  2. 基于DirectShow和FFmpeg的USB摄像头监控软件-转

    第一个版本 ### 软件版本及实现功能 0.0.1 1. USB摄像头枚举和设备信息获取2. 实时视频观看3. 24小时不间断录像,录像文件支持暴风影音播放 ### 软件说明: 软件基于 Direct ...

  3. arguments对象的实例使用

    新年第一记,从这里开始,先来个简单的!去年的知识梳理留下了很多尾巴,原因有很多(知识储量不足,懒了,项目多...) lg:都是借口~   好吧,我承认,这都是借口,今年一定把尾巴清干净! 下面要写的是 ...

  4. 【转】 Pro Android学习笔记（七一）：HTTP服务（5）：多线程调用HttpClient

    目录(?)[-] 应用共享HttpClient对象的同步问题 创建共享HttpClient代码 创建共享对象 创建可共享的HttpClient对象 使用共享HttpClient对象的代码 基础代码 修 ...

  5. 【转】 Pro Android学习笔记（六八）：HTTP服务（2）：HTTP POST

    目录(?)[-] 找一个测试网站 HTTP POST小例子 上次学习了HTTP GET请求,这次学习一下HTTP POST. 找一个测试网站 小例子好写,但要找个测试网站就有些麻烦,一下子无从入手,都 ...

  6. js---window对象的三种窗口

    ============================================================================ window对象的三种窗口.html < ...

  7. Mac For Mongodb安装启动、停止及启动授权

    1.到Mongodb官网下载相应的安装包 地址:https://www.mongodb.com/download-center?jmp=nav#community 2.Mac Mongodb安装过程 ...

  8. Project Server2016升级安装问题项目中心无法显示

    sharepoint 2016升级后,project server 相关中心页面出现空白页面,这是是sharepoint2016一个bug,解决方案用PWA.resx内容替换PWA.en-us.res ...

  9. [codeforces821E]Okabe and El Psy Kongroo

    题意:(0,0)走到(k,0),每一部分有一条线段作为上界,求方案数. 解题关键:dp+矩阵快速幂,盗个图,注意ll 关于那条语句为什么不加也可以,因为我的矩阵C,就是因为多传了了len的原因,其他位 ...

  10. 树莓派 Learning 002 装机后的必要操作 --- 00 修改键盘布局

    树莓派 装机后的必要操作 - 修改键盘布局 我的树莓派型号:Raspberry Pi 2 Model B V1.1 装机系统:NOOBS v1.9.2 上网查,发现树莓派的键盘布局不对,树莓派(ras ...