Vue中通过属性绑定为元素绑定style行内样式的实例代码


Posted in Javascript onApril 30, 2020

1.直接在元素上通过:style的形式,书写样式对象

<h1 :style="{color:'red','font-weight':200}">这是一个H1</h1>

2.将样式对象定义在data中,并直接引用到:style中

1:在data上定义样式

data:{
  styleObj1:{color:'blue','font-weight':200,'font-size':'40px'},
}

2:在元素中,通过属性绑定的形式,将样式对象应用到元素中

<h1 :style="styleObj1">这是一个H1</h1>

3.在:style中通过数组,引用多个data上的样式对象

1:在data上定义样式

data:{
  styleObj1:{color:'blue','font-weight':200,'font-size':'40px'},
  styleObj2:{'font-style':'italic'},
}

2:在元素中,通过属性绑定的形式,将样式对象应用到元素中

<h1 :style="[styleObj1,styleObj2]">这是一个H1</h1>

完整代码:

<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	</head>
<body>
 <div id='app'>
 
 <h1 :style="{color:'red','font-weight':200}">这是一个H1</h1>
 
 <h1 :style="styleObj1">这是一个H1</h1>
 
 <h1 :style="[styleObj1,styleObj2]">这是一个H1</h1>
 
 </div>
</body>
<script src="vue.min.js"></script>
<script>
 var vm = new Vue({
 el:'#app',
 data:{
  styleObj1:{color:'blue','font-weight':200,'font-size':'40px'},
  styleObj2:{'font-style':'italic'},
 }
 });
</script>
</html>

到此这篇关于Vue中通过属性绑定为元素绑定style行内样式的文章就介绍到这了,更多相关vue style行内样式内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript获取和设置CheckBox状态的简单方法
Jul 05 Javascript
javascript简单实现图片预加载
Dec 03 Javascript
jQuery调用ajax请求的常见方法汇总
Mar 24 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
Apr 12 Javascript
浅谈jQuery中replace()方法
May 13 Javascript
自动完成的搜索框javascript实现
Feb 26 Javascript
Javascript实现base64的加密解密方法示例
Jun 27 Javascript
vue实现留言板todolist功能
Aug 16 Javascript
通俗易懂地解释JS中的闭包
Oct 23 Javascript
Node.Js生成比特币地址代码解析
Apr 21 Javascript
微信小程序获取用户绑定手机号方法示例
Jul 21 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
详解Vue串联过滤器的使用场景
Apr 30 #Javascript
JS使用正则表达式实现常用的表单验证功能分析
Apr 30 #Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 #jQuery
Vue发布订阅模式实现过程图解
Apr 30 #Javascript
Javascript异步执行不按顺序解决方案
Apr 30 #Javascript
JS判断浏览器类型与操作系统的方法分析
Apr 30 #Javascript
JavaScript自定义超时API代码实例
Apr 30 #Javascript
You might like
php 中文字符串首字母的获取函数分享
2013/11/04 PHP
PHP连接SQL Server的方法分析【基于thinkPHP5.1框架】
2019/05/06 PHP
2010年最佳jQuery插件整理
2010/12/06 Javascript
json2.js的初步学习与了解
2011/10/06 Javascript
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
JavaScript中实现map功能代码分享
2015/06/11 Javascript
Flow之一个新的Javascript静态类型检查器
2015/12/21 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
2016/03/16 Javascript
jQuery 插件封装的方法
2016/11/16 Javascript
微信小程序 封装http请求实例详解
2017/01/16 Javascript
原生js实现轮播图
2017/02/27 Javascript
详解从买域名到使用pm2部署node.js项目全过程
2018/03/07 Javascript
js实现无刷新监听URL的变化示例代码详解
2020/06/03 Javascript
js实现从右往左匀速显示图片(无缝轮播)
2020/06/29 Javascript
JS字符串和数组如何实现相互转化
2020/07/02 Javascript
[01:12]DOTA2 2015年秋季互动指南
2015/11/10 DOTA
python解析中国天气网的天气数据
2014/03/21 Python
Python描述器descriptor详解
2015/02/03 Python
Python遍历zip文件输出名称时出现乱码问题的解决方法
2015/04/08 Python
python中计算一个列表中连续相同的元素个数方法
2018/06/29 Python
django实现日志按日期分割
2020/05/21 Python
Willer台湾:日本高速巴士/夜行巴士预约
2017/07/09 全球购物
Strawberrynet草莓网新加坡站:护肤、彩妆、香水及美发产品
2018/08/31 全球购物
设计毕业生简历中的自我评价
2013/10/01 职场文书
《可爱的动物》教学反思
2014/02/22 职场文书
品牌推广策划方案
2014/05/28 职场文书
护校行动方案
2014/05/31 职场文书
小学学校评估方案
2014/06/08 职场文书
优秀党支部申报材料
2014/12/24 职场文书
罚款通知怎么写
2015/04/22 职场文书
2016年教师反腐倡廉心得体会
2016/01/13 职场文书
golang内置函数len的小技巧
2021/07/25 Golang
什么是SOLID
2022/03/24 Javascript
浅谈Python中对象是如何被调用的
2022/04/06 Python
Python Matplotlib绘制动画的代码详解
2022/05/30 Python