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. mysql优化sql语句

    mysql优化sql语句   常见误区   www.2cto.com   误区1:   count(1)和count(primary_key) 优于 count(*)   很多人为了统计记录条数,就使 ...

  2. 0818基于360开源数据库流量审计MySQL Sniffer

    开源数据库流量审计MySQL Sniffer 我最推崇的数据库安全产品就是基于流量的数据库审计,因为它不需要更改网络结构,并且也是最关键的是,不影响数据库服务器性能,不用苦口婆心的劝数据库管理员安装监 ...

  3. HDU 4506

    EASY题,快速幂... #include <iostream> #include <cstdio> #include <cstring> #include < ...

  4. openstack中Nova组件Networks的全部python API 汇总

    感谢朋友支持本博客.欢迎共同探讨交流.因为能力和时间有限.错误之处在所难免,欢迎指正! 假设转载,请保留作者信息. 博客地址:http://blog.csdn.net/qq_21398167 原博文地 ...

  5. 具体解释Hibernate中的事务

    1.前言 上一篇博客解说了Hibernate中的一级缓存,属于Session级别的.这篇博客解说一下Hibernate中的事务机制. 有关事务的概念.请參照通俗易懂数据库中的事务.  2.怎样处理Hi ...

  6. 某P2P开发商ERP系统核心业务介绍

       之前说到.某软件公司卖P2P系统的后台管理系统.号称"ERP",今天继续说说这个ERP的核心业务.      业务1:贷款审批流程       贷款审批.主要是针对线下人员的 ...

  7. 学习Mockito - Mockito对Annotation的支持

    学习Mockito - Mockito对Annotation的支持 博客分类: test junit工作  Mockito支持对变量进行注解,例如将mock对象设为测试类的属性,然后通过注解的方式@M ...

  8. PHP 和 Java 的主要区别有哪些？

    PHP 和 Java 的主要区别有哪些? 其实Java方面我要学的真的还有很多,要是有大项目的机会和经验就好,所以提前我肯定要把基础打扎实. 我要学的还有很多,比如前段,后端,还有linux,还有肯定 ...

  9. CodeForces 651A（水题）

    Friends are going to play console. They have two joysticks and only one charger for them. Initially ...

  10. 【Codeforces 105D】 Bag of mice

    [题目链接] http://codeforces.com/contest/148/problem/D [算法] 概率DP f[w][b]表示还剩w只白老鼠,b只黑老鼠,公主胜利的概率,那么 : 1. ...