vue動態綁定style

<link rel="stylesheet" href="https://js.how234.com/third-party/SyntaxHighlighter/shCoreDefault.css" type="text/css" /><script type="text/javascript" src="https://js.how234.com/third-party/SyntaxHighlighter/shCore.js"></script><script type="text/javascript"> SyntaxHighlighter.all(); </script>

vue動態綁定style怎麼操作呢？一起來看看小編今天的分享吧！

style可以透過對象語法和數組語法進行動態綁定。

對象語法：

data: {  activeColor: 'red',  fontSize: 30}

數組語法：

 data: {   styleColor: {     color: 'red'    },     styleSize:{        fontSize:'23px'    } }

另外，對象語法和數組語法進行Class的動態綁定。

對象語法：

data: {  isActive: true,  hasError: false}

數組語法：

data: {  activeClass: 'active',  errorClass: 'text-danger'}