1、有了上一篇的基础，接下来理解内联样式的设置会更简单一点，先看正常的css内联样式：

<dvi id="app">

     <p style="font-size:30px;color:red">vue内联样式定义</p>

</dvi>

在看看通过Vue的属相绑定实现的具体情况：

<body>

    <dvi id="app">

        <p :style="styleObj">vue内联样式定义</p>

    </dvi>

    <script type="text/javascript">

        var vm = new Vue({

            el:"#app",

            data:{

                styleObj:{'font-size':'30px','color':'red'}

            },

            method:{}

        })

    </script>

</body>

其实看起来也没有什么太特殊的亮点，无非是通过参数传递，把定义好的样式绑定到style属性里，底层和css原理是一样的。当然我们也可以像下面这么写，效果是一样的。

<dvi id="app">

     <p :style="{'font-size':'30px','color':'red'}">vue内联样式定义</p>

 </dvi>

2、我们再看看怎么同时使用多个内联样式对象

<body>

    <dvi id="app">

        <p :style="[styleObj1 , styleObj2]">vue内联样式定义</p>

    </dvi>

    <script type="text/javascript">

        var vm = new Vue({

            el:"#app",

            data:{

                styleObj1:{'font-size':'30px','color':'red'},

                styleObj2:{'font-style':'italic'}

            },

            method:{}

        })

    </script>

</body>

可以看到，页面style属性值用了数组，数组元素就是data里定义的样式对象。我感觉用Vue写内联样式的最大好处就是，相同样式只用写一份，然后可以直接调用，但是显然这也是鸡肋，毕竟css强大的功能特性在那里放着，具体怎么使用还是要看具体的应用场景。退一步说，我们现在看到的只是表象，Vue实现的真正意义还是要去看源码解析才能发现其真正的作用价值，这里我们只是为了掌握了解vue的功能而已。

每天进步一点点！

Vue学习之路第十二篇：为页面元素设置内联样式的更多相关文章

  1. Vue学习之路第十八篇：私有过滤器的使用

    1.上篇已经介绍了全局过滤器的使用,“全局”顾名思义就是一次定义处处使用,可以被一个页面里不同的Vue对象所使用,如下代码所示: <body> <div id="app1& ...

  2. Vue学习之路第十五篇：v-if和v-show指令

    1.v-if和v-show都是用来实现条件判断的指令. 2.先看代码 <body> <div id="app"> <button @click=&qu ...

  3. vue学习指南：第十二篇(详细) - Vue的 路由 第二篇 ( 路由按需加载(懒加载))

    各位朋友 因 最近工作繁忙,小编停更了一段时间,快过年了,小编祝愿 大家 事业有成 学业有成 快乐健康 2020开心过好每一天.从今天开始 我会抽时间把 Vue 的知识点补充完整,以及后期会带给大家更 ...

  4. Vue学习之路第十六篇：车型列表的添加、删除与检索项目

    又到了大家最喜欢的项目练习阶段,学以致用,今天我们要用前几篇的学习内容实现列表的添加与删除. 学前准备: ①:JavaScript中的splice(index,i)方法:从已知数组的index下标开始 ...

  5. Vue学习之路第十九篇：按键修饰符的使用

    1.我们工作中经常会有类似于这样的需求:按下Enter键触发某个事件.或者按下ESC退出页面等各种各样的场景.在Vue中,可以通过键盘修饰符来实现这样的场景. 2.事例代码: <body> ...

  6. Vue学习之路第十四篇：v-for指令中key的使用注意事项

    1.学前准备: JavaScript中有一个方法:unshift() ,其作用是向数组的开头添加一个或更多元素,并返回新的长度.该方法的第一个参数将成为数组的新元素 0,如果还有第二个参数,它将成为新 ...

  7. FastAPI 学习之路（十二）接口几个额外信息和额外数据类型

    系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...

  8. Vue学习之路第十一篇：为页面元素设置class类样式

    1.class为页面元素的一个属性,通过前面第五篇的内容可知,操作属性需要使用到v-bind指定(也可简写为 :). 2.先来看一个简单的页面样式内容: <!DOCTYPE html> & ...

  9. Vue学习之路第二十篇：Vue生命周期函数-组件创建期间的4个钩子函数

    1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数 ...

随机推荐

  1. rmq的st算法模板题 nyoj 119

    士兵杀敌(三) 时间限制:2000 ms  |  内存限制:65535 KB 难度:5 描述 南将军统率着N个士兵,士兵分别编号为1~N,南将军经常爱拿某一段编号内杀敌数最高的人与杀敌数最低的人进行比 ...

  2. poj 1466 最大独立集

    #include<stdio.h> #include<string.h>//这个分开后男的站在一边女的站在一边,不肯能有les或者gay.最大独立集=n-最大匹配数 #defi ...

  3. 转载 - 跳跃的舞者，舞蹈链（Dancing Links）算法——求解精确覆盖问题

    出处:http://www.cnblogs.com/grenet/p/3145800.html 精确覆盖问题的定义:给定一个由0-1组成的矩阵,是否能找到一个行的集合,使得集合中每一列都恰好包含一个1 ...

  4. ionic3中使用自定义配置

    新工作接触了ionic,以前没用过,只是离职前短暂接触过类似的vuex,到需要修改公司项目的时候临时差什么学什么,其中一个是自定义配置项 配置是很常见的设置,之前用的thinkphp的配置很清晰,基本 ...

  5. 逻辑斯蒂回归3 -- 最大熵模型之改进的迭代尺度法(IIS)

    声明: 1,本篇为个人对<2012.李航.统计学习方法.pdf>的学习总结,不得用作商用.欢迎转载,但请注明出处(即:本帖地址). 2,因为本人在学习初始时有非常多数学知识都已忘记.所以为 ...

  6. 18005 It is not ugly number

    18005 It is not ugly number 时间限制:2000MS  内存限制:65535K提交次数:0 通过次数:0 题型: 编程题   语言: G++;GCC Description ...

  7. [JavaEE] DWR框架简介

    DWR框架简介 DWR框架是一个可以允许你去创建AJAX WEB站点的JAVA开源库.它可以让你在浏览器的JavaScript代码中调用Web服务器的Java代码,就像Java代码在浏览器中一样.DW ...

  8. 【优化算法】遗传算法GA求解混合流水车间调度问题（附C++代码）

    00 前言 各位读者大家好,好久没有介绍算法的推文了,感觉愧对了读者们热爱学习的心灵.于是,今天我们带来了一个神奇的优化算法--遗传算法! 它的优点包括但不限于: 遗传算法对所求解的优化问题没有太多的 ...

  9. 深入理解 python 元类

    一.什么的元类 # 思考: # Python 中对象是由实例化类得来的,那么类又是怎么得到的呢? # 疑问: # python 中一切皆对象,那么类是否也是对象?如果是,那么它又是那个类实例化而来的呢 ...

  10. Fabric quickly

    环境很重要.环境很重要.环境很重要 # CentOS 7 $ setenforce 0 # 可以设置配置文件永久关闭 $ systemctl stop iptables.service $ syste ...