文档章节

Vue.js学习系列(三十四)-- Vue.js样式绑定(五)

博为峰教研组
 博为峰教研组
发布于 2017/03/20 13:40
字数 290
阅读 5
收藏 0

2. Vue.js style(内联样式)

我们可以在 v-bind:style 直接设置样式:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script src="src/vue.min.js"></script>

</head>

<body>

<div id="app">

<div v-bind:style="{color:activeColor,fontSize:fontSize+'px'}">51code</div>

</div>

<script type="text/javascript">

new  Vue({

el:"#app",

data:{

activeColor:"green",

fontSize:20

}

})

</script>

 

</body>

</html>

运行结果:

上述代码中,我们通过v-bind:style="{ color: activeColor, fontSize: fontSize + 'px'设置的div的字体颜色和字体大小。

我们也可以将div的样式绑定在一个样式对象上,这样看起来会更清晰

下面通过绑定样式对象实现和上个例子一样的效果

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script src="src/vue.min.js"></script>

</head>

<body>

<div id="app">

<div v-bind:style="styleObj">51code</div>

</div>

<script type="text/javascript">

new  Vue({

el:"#app",

data:{

styleObj:{

color:"green",

fontSize:"20px"

}

}

})

</script>

 

</body>

</html>

v-bind:style 可以使用数组将多个样式对象应用到一个元素上:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script src="src/vue.min.js"></script>

</head>

<body>

<div id="app">

<div v-bind:style="[baseStyles,overridingStyles]">51code</div>

</div>

<script type="text/javascript">

new  Vue({

el:"#app",

data:{

baseStyles:{

color:"green",

fontSize:"20px"

},

overridingStyles:{

"background-color":"yellow"

}

}

})

</script>

</body>

</html>

© 著作权归作者所有

博为峰教研组
粉丝 51
博文 1224
码字总数 479077
作品 0
黄浦
程序员
私信 提问
Vue新手向:14篇教程带你从零撸一个Todo应用

欢迎来到 Vue2.x Todo 系列教程,这个教程将手把手教你从零开始使用 Vue 搭建一个 Todo(待办事项)应用。 书写此教程的动机 Vue 作者尤雨溪在 新手向:Vue 2.0 的建议学习顺序 中给出了中肯...

追梦人物
01/16
0
0
好程序员web前端分享菜鸟Vue学习笔记(二)

好程序员web前端分享菜鸟Vue学习笔记(二),今天天气不错,心情也不错,最近学习Vue越来越顺利了,今天接着学习,接着记录。 首先,来学习下常用的v-bind属性,它的作用是在属性中使用vue中...

好程序员IT
05/09
30
0
mpvue: vuejs和小程序碰撞出来的火花

微信自推出小程序以来,热度一直居高不下,各大公司开始专门开发小程序,但是小程序自定义的wxml和wxss和自己定义的语法,让被三大框架统治的前端江湖头疼不易,因为需要专门为小程序开发一...

蜗牛老湿
2018/05/18
0
0
好程序员教程分析Vue学习笔记五

好程序员教程分析Vue学习笔记五,上次我们学习了Vue的组件,这次我们来学习一下路由的使用。在Vue中,所谓的路由其实跟其他的框架中的路由的概念差不多,即指跳转的路径。 注意:在Vue中,要...

好程序员IT
06/10
22
0
【Ts重构Vue】00-Ts重构Vue概要

为什么重构 本科机械设计制造及其自动化,16年稀里糊涂的进了一家干变厂,17年自学了大半年,18年正式跨行来到前端。工作中主要写业务代码,很少涉及造轮子工作,一直希望能够提高编程能力。...

峡迩
08/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

关于java中变量的重名问题

在java语言中,变量的命名有很多规则和规范,但是有的地方可以使用相同的变量名,有的地方却不能使用,这是为什么呢? 下面是个人的一点见解,是从作用域和内存来分析的,目的是为了方便理解...

INEVITABLE
14分钟前
4
0
MySQL的COUNT语句,竟然都能被面试官虐的这么惨?

数据库查询相信很多人都不陌生,所有经常有人调侃程序员就是CRUD专员,这所谓的CRUD指的就是数据库的增删改查。 在数据库的增删改查操作中,使用最频繁的就是查询操作。而在所有查询操作中,...

程序员修BUG
17分钟前
4
0
PHP+Mysql统计文件下载次数实例

PHP+Mysql统计文件下载次数实例,实现的原理也很简单,是通过前台点击链接download.php传参id,来更新点击次数。 获取文件列表: <?php require 'conn.php'; $query = mysql_query("S...

ymkjs1990
18分钟前
3
0
一、环境变量及Jshell

一、环境变量: 作用: 可执行文件所在位置的链接。CLI输入命令时,通过环境变量指引找到命令所在位置 windows的环境变量名不区分大小写,Linux区分 Windows下的用户变量即只有当前用户生效 ...

清自以敬
19分钟前
4
0
微软改名部又出手:Office 365正在悄悄更名为Microsoft 365

然而让人疑惑的是Microsoft 365 是微软面向企业提供的服务,这项服务附带操作系统以及办公软件的订阅授权。 现在把面向家庭消费者的办公软件也换成Microsoft 365 是什么操作?没人知道因为微...

linuxCool
19分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部