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. Appendix B: Netsh Command Syntax for the Netsh Firewall Context

    11 out of 19 rated this helpful - Rate this topic Published: December 17, 2004 The following Netsh c ...

  2. CODEVS——T 1297 硬币

    http://www.codevs.cn/problem/1297/  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解       题目描述 Descrip ...

  3. Javascript中的原型继承具体解释

    js中的继承,是面向对象的知识,由于js没有类的概念.所以继承是通过对象实现的.谈到继承.就必须说到prototype,就不得不先说下new的过程. 一个小小的列子: <script type= ...

  4. FPGA 浮点单元设计

    浮点数在内存中的存放格式例如以下: 地址 +0 +1 +2 +3 内容 SEEE EEEE EMMM MMMM MMMM MMMM MMMM MMMM 这里 S 代表符号位,1是负,0是正 E 偏移1 ...

  5. Win8下建立shortcut到開始界面

    在win8前建立開始菜单都非常easy,但到win8就有点不一样了.它的開始菜单是metro风格的.以下我们来看下详细的实现代码.有兴趣的朋友能够自己測试下,它的作用是设置shortcut到metro ...

  6. 301 和 302 对 SEO 的影响

    网站优化中,经常会面临网站链接修改或改变的事情,其中一个解决办法就是使用网站跳转的方式,处理变化的链接,下面讲述301和302跳转对SEO的影响. 301(永久移动) 请求的网页已被永久移动到新位置. ...

  7. 关于Spring中的<context:annotation-config/>配置作用

    转自:https://www.cnblogs.com/iuranus/archive/2012/07/19/2599084.html 当我们需要使用BeanPostProcessor时,直接在Spri ...

  8. OCC 矩阵变换

    在OpenCADCADE中, 通过gp_Trsf类来进行矩阵变换操作, 采用矩阵在左的方式: 新点 = 变换矩阵 * 点 基本原理如下: //! Defines a non-persistent tr ...

  9. Kafka .NET操作

    Kafaka .NET连接 Kafka目前主流在用的.NET客户端有两个:一个是kafka-net,另外一个是Confluent.Kafka,这里给出使用示例: kafka-net示例: public ...

  10. fastJson解析复杂对象时碰到的问题

    碰到map对象无法解析出来,发现问题是缺少有get/set方法,否则无法解析. 对象转json字符串 JSON.toJSONString(module) json字符串转对象(必须是pojo) mod ...