vue中怎么绑定行间样式style
vue中怎么绑定行间样式style,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
10年积累的成都网站设计、成都网站建设经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计后付款的网站建设流程,更有永年免费网站建设让你可以放心的选择与我们合作。
一、绑定class属性的方式
1、通过数组的方式,为元素绑定多个class
window.onload = function(){ var c = new Vue({ el : '#box', data : { red_color : 'red', bg_color : 'bg' } }); }this is a test string
上例为span 绑定2个class,通过设定red_color和bg_color的值,找到对应的class类名
2、通过控制class的true或者false,来使用对应的class类名, true: 使用该class, false: 不使用该class
window.onload = function(){ var c = new Vue({ el : '#box', data : { } }); }this is a test string
3、这种方式,跟第二种差不多,只不过是把class的状态true/false用变量来代替
window.onload = function(){ var c = new Vue({ el : '#box', data : { r : true, b : false } }); }this is a test string
4、为class属性绑定整个json对象
window.onload = function(){ var c = new Vue({ el : '#box', data : { json : { red : true, bg : false } } }); }this is a test string
二、绑定style行间样式的多种方式
1、使用json格式,直接在行间写
window.onload = function(){ var c = new Vue({ el : '#box', }); }this is a test string
2、把data中的对象,作为数组的某一项,绑定到style
window.onload = function(){ var c = new Vue({ el : '#box', data : { c : { color : 'green' } } }); }this is a test string
3、跟上面的方式差不多,只不过是为数组设置了多个对象
window.onload = function(){ var c = new Vue({ el : '#box', data : { c : { color : 'green' }, b : { background : '#ff8800' } } }); }
this is a test string
4、直接把data中的某个对象,绑定到style
window.onload = function(){ var c = new Vue({ el : '#box', data : { a : { color:'yellow', background : '#000' } } }); }
this is a test string
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联的支持。
分享文章:vue中怎么绑定行间样式style
文章URL:http://pwwzsj.com/article/igjdsj.html