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'}