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

其他资讯