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

window.onload = function(){ var c = new Vue({ el : '#box', data : { json : { red : true, bg : false } } }); } this is a test string

window.onload = function(){ var c = new Vue({ el : '#box', data : { c : { color : 'green' } } }); } this is a test string

window.onload = function(){ var c = new Vue({ el : '#box', data : { c : { color : 'green' }, b : { background : '#ff8800' } } }); }

window.onload = function(){ var c = new Vue({ el : '#box', data : { a : { color:'yellow', background : '#000' } } }); }

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注创新互联行业资讯频道，感谢您对创新互联的支持。

重庆分公司，新征程启航

vue中怎么绑定行间样式style

其他资讯