企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
1. 直接在元素上通过`:style`的形式,书写样式对象 ``` <div id="app"> <h1 :style="styleObj">Vue教程</h1> </div> ``` 2. 将样式对象定义到`data`中,并直接引用到`:style`中 ``` <div id="app"> <h1 :style="styleObj">Vue教程</h1> </div> <script> var vm = new Vue({ el: '#app', data: { styleObj: {color:'red', 'text-decoration': 'underline'} } }) </script> ``` 3. 在`:style`中通过数组,引用多个`data`上的样式对象 ``` <div id="app"> <h1 :style="[styleObj, styleObj2]">Vue教程</h1> </div> ``` 4. 三元表达式 ``` :style="{width:isCollpase?'58px':'300px'}" ```