如何在Vue模板内使用style标签并从数据模型动态更新样式？

嘿，我完全懂你想要的那种便捷感——把组件的元素和对应的样式打包在一起，还能通过绑定的值动态更新样式对吧？Vue默认确实会移除组件模板里直接嵌套的<style>标签，但咱们有几个优雅的办法能实现你的需求，不用妥协便捷性。

这是最推荐的方案，既贴近你想要的“样式和组件绑定”的思路，又完全符合Vue的响应式逻辑，还不用手动操作DOM。

核心思路是：在组件的根元素上绑定一个动态的CSS变量，然后在组件的<style>标签里引用这个变量。当你的bgColor变化时，CSS变量的值会自动更新，对应的样式也就跟着变了。

示例代码：

<template>
  <div class="setting" :style="{ '--input-bg': bgColor }">
    <input type="text" v-model="bgColor" placeholder="输入颜色值，比如#f0f0f0">
  </div>
</template>

<script setup>
import { ref } from 'vue'
// 初始化背景色
const bgColor = ref('#ffffff')
</script>

<style scoped>
.setting input {
  /* 引用动态的CSS变量 */
  background-color: var(--input-bg);
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
</style>

这个方案的好处：

• 样式依然是组件作用域的（scoped），不会污染全局
• 完全利用Vue的响应式系统，不需要额外的DOM操作
• 代码结构清晰，样式和组件逻辑绑定在一起

如果你确实需要把样式注入到页面的<head>里（比如样式要作用于组件外的元素），可以通过监听bgColor的变化，动态创建或更新<head>里的style标签。

示例代码：

<template>
  <div class="setting">
    <input type="text" v-model="bgColor" placeholder="输入颜色值">
  </div>
</template>

<script setup>
import { ref, watch, onMounted, onUnmounted } from 'vue'

const bgColor = ref('#ffffff')
let dynamicStyle = null

onMounted(() => {
  // 组件挂载时创建style标签并添加到head
  dynamicStyle = document.createElement('style')
  updateStyleContent()
  document.head.appendChild(dynamicStyle)
})

// 监听bgColor变化，实时更新样式内容
watch(bgColor, () => {
  updateStyleContent()
})

onUnmounted(() => {
  // 组件销毁时移除style标签，避免内存泄漏和样式污染
  if (dynamicStyle) {
    document.head.removeChild(dynamicStyle)
  }
})

// 封装更新样式的函数
function updateStyleContent() {
  if (dynamicStyle) {
    dynamicStyle.textContent = `.setting input { background-color: ${bgColor.value}; }`
  }
}
</script>

<style scoped>
.setting input {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
</style>

注意事项：

• 一定要在组件销毁时移除创建的style标签，不然会导致全局样式混乱和内存泄漏
• 这个方法适合样式需要作用于全局的场景，否则优先用方法1

内容的提问来源于stack exchange，提问作者ForDev