近来发现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. 【caffe】卷积层代码解析

    1.Forward_cpu conv_layer.cpp template <typename Dtype> void ConvolutionLayer<Dtype>::For ...

  2. UOJ#164：【清华集训2015】V

    浅谈区间最值操作与历史最值问题:https://www.cnblogs.com/AKMer/p/10225100.html 题目传送门:http://uoj.ac/problem/164 论文题.论文 ...

  3. Linux使用tcpdump抓取网络数据包示例

    tcpdump是Linux命令行下常用的的一个抓包工具,记录一下平时常用的方式,测试机器系统是ubuntu 12.04. tcpdump的命令格式 tcpdump的参数众多,通过man tcpdump ...

  4. 杂项：TModJS

    ylbtech-杂项:TModJS TmodJS(原名 atc)是一个简单易用的前端模板预编译工具.它通过预编译技术让前端模板突破浏览器限制,实现后端模板一样的同步“文件”加载能力.它采用目录来组织维 ...

  5. smbpasswd和pdbedit

    samba用户管理: smbpasswd :smbpasswd命令属于samba套件,能够实现添加或删除samba用户和为用户修改密码. smbpasswd [options] USERNAME -a ...

  6. shell入门-系统和用户的配置文件

    变量分为系统变量和用户自定义变量,他们的配置文件当然分为系统环境变量配置文件和用户环境变量控制文件 1.规定环境变量的配置文件 [root@wangshaojun 111]# vim /etc/pro ...

  7. DevExpress 显示进度条

    1.使用了DevExpress的WaitDialogForm WaitDialogForm waitDialogForm = null; new Thread((ThreadStart)delegat ...

  8. Select 标签的默认值设置

    以下是网上“借鉴”的:(http://blog.csdn.net/nairuohe/article/details/6307367/) 比如<select class="selecto ...

  9. 《Spring实战》系列之Bean的装配-Days01

    1 自动化装配bean Spring通过两个方面实现对bean的自动装配 1 ) 组件扫描(component scaning):Spring会自动发现Spring上下文中的bean 2 ) 自动装配 ...

  10. 11_adb指令练习

    通过adb指令咱们装相关的项目.把项目推到设备上.也可以进行文件相关的操作.adb的一些相关的指令. 开启连接IDE和设备的服务. adb可以安装应用也可以卸载应用.项目怎么去区分?一个包名一个是签名 ...