Vue中通过属性绑定为元素绑定style行内样式的实例代码
更新时间：2020年04月30日 11:02:36 作者：啃火龙果的兔子
这篇文章主要介绍了Vue中通过属性绑定为元素绑定style行内样式,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
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行内样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了富文本编辑器vue2-editor实现全屏功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-05-05
本文主要介绍了Vuex localStorage的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
这篇文章主要介绍了用Cordova打包Vue项目的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
这篇文章主要介绍了vue中关于redirect(重定向)初学者的坑，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要为大家介绍了vue使用Echart线柱混合图排坑记录,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
这篇文章主要介绍了Vue elementui字体图标显示问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-08-08
在项目开发中需要使用vue实现tab页签切换功能,所以这里总结下,这篇文章主要给大家介绍了关于vue实现标签页切换/制作tab组件的相关资料,需要的朋友可以参考下2023-11-11
这篇文章主要为大家详细介绍了如何使用Vue生成动态表单,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以跟随小编一起学习一下2024-03-03
错误处理是框架设计的核心要素之一,框架的错误处理好坏,直接决定用户应用程序的健壮性以及用户开发应用时处理错误的心智负担,本文将从源码入手,剖析一下Vue3中是如何进行错误处理的,需要的可以参考下2024-01-01
这篇文章主要介绍了Vue的双向数据绑定实现原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-02-02
最新评论