Vue学习之路第十二篇：为页面元素设置内联样式
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学习之路第十二篇：为页面元素设置内联样式的更多相关文章
- Vue学习之路第十八篇：私有过滤器的使用
1.上篇已经介绍了全局过滤器的使用,“全局”顾名思义就是一次定义处处使用,可以被一个页面里不同的Vue对象所使用,如下代码所示: <body> <div id="app1& ...
- Vue学习之路第十五篇：v-if和v-show指令
1.v-if和v-show都是用来实现条件判断的指令. 2.先看代码 <body> <div id="app"> <button @click=&qu ...
- vue学习指南：第十二篇(详细) - Vue的 路由 第二篇 ( 路由按需加载(懒加载))
各位朋友 因 最近工作繁忙,小编停更了一段时间,快过年了,小编祝愿 大家 事业有成 学业有成 快乐健康 2020开心过好每一天.从今天开始 我会抽时间把 Vue 的知识点补充完整,以及后期会带给大家更 ...
- Vue学习之路第十六篇：车型列表的添加、删除与检索项目
又到了大家最喜欢的项目练习阶段,学以致用,今天我们要用前几篇的学习内容实现列表的添加与删除. 学前准备: ①:JavaScript中的splice(index,i)方法:从已知数组的index下标开始 ...
- Vue学习之路第十九篇：按键修饰符的使用
1.我们工作中经常会有类似于这样的需求:按下Enter键触发某个事件.或者按下ESC退出页面等各种各样的场景.在Vue中,可以通过键盘修饰符来实现这样的场景. 2.事例代码: <body> ...
- Vue学习之路第十四篇：v-for指令中key的使用注意事项
1.学前准备: JavaScript中有一个方法:unshift() ,其作用是向数组的开头添加一个或更多元素,并返回新的长度.该方法的第一个参数将成为数组的新元素 0,如果还有第二个参数,它将成为新 ...
- FastAPI 学习之路（十二）接口几个额外信息和额外数据类型
系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...
- Vue学习之路第十一篇：为页面元素设置class类样式
1.class为页面元素的一个属性,通过前面第五篇的内容可知,操作属性需要使用到v-bind指定(也可简写为 :). 2.先来看一个简单的页面样式内容: <!DOCTYPE html> & ...
- Vue学习之路第二十篇：Vue生命周期函数-组件创建期间的4个钩子函数
1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数 ...
随机推荐
- Lua5.2 请求 luasocket 相关模块时的 multiple-lua-vms-detected
首先说一下5.3貌似没有这个问题, 可是眼下最新版的luasocket 3.0 rc1仅仅能支持5.2, 5.3调用的话程序会崩溃(不知道是不是我没配置好) 出现这个问题的解决办法, 想必网上有非常多 ...
- How to pass external configuration properties to storm topology?
How to pass external configuration properties to storm topology? I want to pass some custom configur ...
- 一种加快在苹果app store中上架的方法
预计近期苹果app应用上架的比較多,审核比較慢,如今一个app从提交到上架短则7.8天.长则2.3个星期.我在实际上线应用时,总结了一个简单有用的小技巧,能够加快上架时间,近期使用这样的方法后.我们基 ...
- 《编程导论（Java）·1.4.1 范式》
这个楼主,是我的学生么?2013年写的! 嗯."编程范式或许是学习不论什么一门编程语言时要理解的最重要的术语".这句话早在2005年出版<Java程序设计>(宋中山,严 ...
- 国外物联网平台初探（一） ——亚马逊AWS IoT
平台定位 AWS IoT是一款托管的云平台,使互联设备可以轻松安全地与云应用程序及其他设备交互. AWS IoT可支持数十亿台设备和数万亿条消息,并且可以对这些消息进行处理并将其安全可靠地路由至 AW ...
- php传值调用和传值调用和变量函数
php传值调用和传值调用和变量函数 代码 <?php //传值调用,$m的值不改变 function text($i){ $i = 'Clive'; echo $i; } text(123); ...
- php中全局变量global和超全局变量$GLOBALS
php中全局变量global和超全局变量$GLOBALS 1.global Global的作用是定义全局变量,但是这个全局变量不是应用于整个网站,而是应用于当前页面,包括include或require ...
- 聚类（三）FUZZY C-MEANS 模糊c-均值聚类算法——本质和逻辑回归类似啊
摘自:http://ramsey16.net/%E8%81%9A%E7%B1%BB%EF%BC%88%E4%B8%89%EF%BC%89fuzzy-c-means/ 经典k-均值聚类算法的每一步迭代中 ...
- hdoj--5093--Battle ships（二分图经典建图）
Battle ships Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Tot ...
- [转载]linux上安装oracle
原文地址:linux上安装oracle作者:天涯恨客 1.创建oinstall组 [root@xieqing ~]# groupadd oinstall 创建dba组 [root@xieqing ~] ...