前言

对比 Vue2 ，引出并展开 Vue3 。

本文讲述了 style v-bind 动态样式是什么，以及使用方法和代码示例。

简介

相信大家对于这块的理解肯定没问题，所以不过多解释了。

简单来说就是把我们 script 中的数据可以在 style 标签中使用，大白话讲就是用我们的 JS 逻辑，更 “优雅” 的改变元素样式。

Vue2 示例

我们先用 Vue2 实现一个动态样式的小例子，如下代码所示：

<template><p :class="flag ? 'open' : 'close'">动态改变背景</p><button @click="schalter()">开启/关闭</button></template><script>export default {data() {return {// 标识flag: false,}},methods: {schalter() {this.flag = !this.flag},}}</script><style>/* 开启与关闭样式 */.open { background: red; }.close { background: green; }/* END */</style>

好，这个时候打开控制台，看一下 DOM 表现，实际上原理就是切换了类名。

我们再打开代码，可以看到虽然能实现功能，但是代码并不优雅，你需要在模板上写判断，又需要重新定义一份用于切换后的样式，并且业务逻辑复杂起来后，维护相当困难。

Vue3 示例

这时候，我们 Vue3 就针对此做出了新的方案，我们一起来用 Vue3 重写一下。

<template><p class="switch">动态改变背景</p><button @click="schalter()">开启/关闭</button></template><script>import { ref } from 'vue'export default {setup() {// 标识const color = ref(false)// 开启/关闭const schalter = () => {color.value = !color.value}// returnreturn { color, schalter }}}</script><style>/* 开启与关闭样式 */.switch{/* 注意: 如果使用三元表达式 外侧需要用双引号包裹(内需单引号判断) */background: v-bind("color ? 'red' : 'green'");}/* END */</style>

来看一下效果，一摸一样。

咱们再看看一下控制台 DOM 表现，看到没，这串随机字符是由 Vue 生成的，它帮我们做好了动态样式处理。

大家可以直观的看到，相比 Vue2 ，代码逻辑复杂度直接降低了，因为我们不需要关注模板了，而且以后维护的话，直接找 CSS ，然后定位变量即可，非常nice。

---

另外呢，我们也可以将属性值直接通过变量写入，不做任何判断。

<template><p class="switch">黄图</p></template><script>import { ref } from 'vue'export default {setup() {// 标识const color = ref('yellow')// returnreturn { color }}}</script><style>.switch{ background: v-bind(color); }</style>

SEO

Vue3 官方文档教程，vue3.js style v-bind 动态样式如何使用，Vue3动态样式你不会吗，Vue指令中的v-bind之动态更改样式，Vue3 样式绑定 | 菜鸟教程，Vue:动态绑定样式(v-bind)，vue系列教程-07vue动态绑定样式，Vue中Class和Style实现v-bind绑定的几种用法，Vue3 - style v-bind 动态样式（详细使用教程）。