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调用XML制作连动下拉列表框
Jun 25 Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
Jun 19 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
Jul 01 Javascript
教你如何使用PHP输出中文JSON字符串
May 22 Javascript
JavaScript判断是否为数组的3种方法及效率比较
Apr 01 Javascript
javascript中判断json的方法总结
Aug 27 Javascript
js实现多张图片延迟加载效果
Jul 17 Javascript
vue-router配合ElementUI实现导航的实例
Feb 11 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
Apr 10 Javascript
vue3实现v-model原理详解
Oct 09 Javascript
在vue中封装方法以及多处引用该方法详解
Aug 14 Javascript
JavaScript架构搭建前端监控如何采集异常数据
Jun 25 Javascript
详解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
关于页面优化和伪静态
2009/10/11 PHP
PHP中CURL方法curl_setopt()函数的参数分享
2013/01/19 PHP
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
Thinkphp和Bootstrap结合打造个性的分页样式(推荐)
2016/08/01 PHP
PHP调用接口API封装的例子
2019/10/11 PHP
laravel与thinkphp之间的区别与优缺点
2021/03/02 PHP
JS实现打开本地文件或文件夹
2021/03/09 Javascript
Prototype Function对象 学习
2009/07/12 Javascript
javascript XMLHttpRequest对象全面剖析
2010/04/24 Javascript
jQuery UI 实现email输入提示实例
2013/08/15 Javascript
在Linux上用forever实现Node.js项目自启动
2014/07/09 Javascript
jquery得到iframe src属性值的方法
2014/09/25 Javascript
关于验证码在IE中不刷新的快速解决方法
2016/09/23 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
JavaScript实现换肤功能
2017/09/15 Javascript
VSCode中如何利用d.ts文件进行js智能提示
2018/04/13 Javascript
详解Vue结合后台的列表增删改案例
2018/08/21 Javascript
vue进入页面时滚动条始终在底部代码实例
2019/03/26 Javascript
关于layui flow loading占位图的实现方法
2019/09/21 Javascript
解决layui页面按钮点击无反应,也不报错的问题
2019/09/29 Javascript
Python查找相似单词的方法
2015/03/05 Python
Python中的zipfile模块使用详解
2015/06/25 Python
详解Python的collections模块中的deque双端队列结构
2016/07/07 Python
使用pandas read_table读取csv文件的方法
2018/07/04 Python
Python模拟简单电梯调度算法示例
2018/08/20 Python
深入了解Python枚举类型的相关知识
2019/07/09 Python
python 多进程共享全局变量之Manager()详解
2019/08/15 Python
Ubuntu下Python+Flask分分钟搭建自己的服务器教程
2019/11/19 Python
python快速安装OpenCV的步骤记录
2021/02/22 Python
利用CSS3的定位页面元素
2009/08/29 HTML / CSS
美国孕妇装购物网站:Motherhood Maternity
2019/09/22 全球购物
校园网站的创业计划书范文
2013/12/30 职场文书
小班上学期个人总结
2015/02/12 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书
《迟到》教学反思
2016/02/24 职场文书