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='https://www.haobala.com/bcjs/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行内样式内容请搜索好吧啦网以前的文章或继续浏览下面的相关文章希望大家以后多多支持好吧啦网！
相关文章：
1. 在IDEA中实现同时运行2个相同的java程序2. docker /var/lib/docker/aufs/mnt 目录清理方法3. Vuex localStorage的具体使用4. python GUI库图形界面开发之PyQt5中QWebEngineView内嵌网页与Python的数据交互传参详细方法实例5. Docker究竟是什么 为什么这么流行 它的优点和缺陷有哪些？6. python+excel接口自动化获取token并作为请求参数进行传参操作7. 基于Python制作一副扑克牌过程详解8. 《CSS3实战》笔记--渐变设计（三)9. ASP.NET泛型三之使用协变和逆变实现类型转换10. Python matplotlib画图时图例说明(legend)放到图像外侧详解
网公网安备