首页vue动态绑定style

vue动态绑定style

时间: 2023-08-30 07:09:06 浏览: 100

Vue 提供了 v-bind:style 指令，用于动态绑定元素的样式。语法： ```html <div v-bind:style="{ css属性名: css属性值, ... }"></div> ``` 其中，css属性名可以使用驼峰式写法，也可以使用 kebab-case 写法（即用连字符 - 分隔单词）。例如，动态绑定一个 div 元素的背景颜色和字体大小： ```html <div v-bind:style="{ backgroundColor: bgColor, fontSize: fontSize + 'px' }">Hello, Vue!</div> ``` 在 Vue 实例中，需要定义 bgColor 和 fontSize 两个 data 属性，然后在模板中使用上述语法动态绑定样式。完整示例代码如下： ```html <!DOCTYPE html> <html> <head> <title>Vue动态绑定样式示例</title> </head> <body> <div id="app"> <div v-bind:style="{ backgroundColor: bgColor, fontSize: fontSize + 'px' }">Hello, Vue!</div> <br> <button v-on:click="changeStyle">Change Style</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { bgColor: 'red', fontSize: 16 }, methods: { changeStyle: function() { this.bgColor = 'green'; this.fontSize = 24; } } }) </script> </body> </html> ``` 上述代码中，点击 "Change Style" 按钮可以动态改变元素的背景颜色和字体大小。

阅读全文