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 相关文章推荐
js jquery获取随机生成id的服务器控件的三种方法
Jul 11 Javascript
一个js过滤空格的小函数
Oct 10 Javascript
触屏中的JavaScript事件分析
Feb 06 Javascript
JavaScript中的DSL元编程介绍
Mar 15 Javascript
11种ASP连接数据库的方法
Sep 18 Javascript
基于js实现的限制文本框只可以输入数字
Dec 05 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
Jan 01 Javascript
JS+canvas绘制的动态机械表动画效果
Sep 12 Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
Dec 12 Javascript
Vue的data、computed、watch源码浅谈
Apr 04 Javascript
微信小程序实现锚点跳转
Nov 23 Javascript
js实现简单商品筛选功能
Feb 02 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
模仿OSO的论坛(四)
2006/10/09 PHP
php操作mysql数据库的基本类代码
2014/02/25 PHP
php过滤所有恶意字符(批量过滤post,get敏感数据)
2014/03/18 PHP
PHP laravel中的多对多关系实例详解
2017/06/07 PHP
Laravel 实现Controller向blade前台模板赋值的四种方式小结
2019/10/22 PHP
php把文件设置为插件的技巧方法
2020/02/03 PHP
JQuery 小练习(实例代码)
2009/08/07 Javascript
js实现网页标题栏闪烁提示效果实例分析
2014/11/20 Javascript
EasyUI实现第二层弹出框的方法
2015/03/01 Javascript
javaScript知识点总结(必看篇)
2016/06/10 Javascript
javascript弹出窗口中增加确定取消按钮
2016/06/24 Javascript
深入理解 webpack 文件打包机制(小结)
2018/01/08 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
2018/06/28 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
2018/12/03 Javascript
js使用cookie实现记住用户名功能示例
2019/06/13 Javascript
es6中使用map简化复杂条件判断操作实例详解
2020/02/19 Javascript
Vue管理系统前端之组件拆分封装详解
2020/08/23 Javascript
解决await在forEach中不起作用的问题
2021/02/25 Javascript
python使用正则表达式匹配字符串开头并打印示例
2017/01/11 Python
Python实现随机选择元素功能
2017/09/14 Python
快速了解python leveldb
2018/01/18 Python
python数据分析数据标准化及离散化详解
2018/02/26 Python
python素数筛选法浅析
2018/03/19 Python
Python 3.x 判断 dict 是否包含某键值的实例讲解
2018/07/06 Python
python实现Zabbix-API监控
2018/09/17 Python
Python chardet库识别编码原理解析
2020/02/18 Python
python如何对链表操作
2020/10/10 Python
css3动画效果小结(推荐)
2016/07/25 HTML / CSS
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
野兽派官方旗舰店:THE BEAST 野兽派
2016/08/05 全球购物
美国山地自行车、露营、户外装备和服装购物网站:Aventuron
2018/05/05 全球购物
测量工程专业求职信
2014/02/24 职场文书
八荣八耻演讲稿
2014/09/15 职场文书
县长群众路线对照检查材料思想汇报
2014/10/02 职场文书
大学生党员自我剖析材料
2014/10/06 职场文书
pytorch 中nn.Dropout的使用说明
2021/05/20 Python