vue在style标签中使用响应式变量

代码 · 2023-12-08

vue中定义的变量可以在html中直接已v-bind:的方式(:属性名)的方式直接使用,如:style="{color:'#003eff'}",但是如果很多组件都需要那就很麻烦了,直接使用:class的方式也可以但还是不够优雅,但其实可以在style代码段中加入响应式的绑定从而通过Vue的变量更改style中的值

<html>
  <body>
     <span class="commond">这是一段文字</span>
  </body>
</html>

//Script部分

<script>
export default {
  data () {
    return {
      color: "#003eff"
    }
  }
</script>

//Style部分

<style vars="{ color }">
   .commond{
      color:var(--color)
   }

上述只是Vue2的方法,Vue3需要在style中做如下更改

<style>
.commond {
  color: v-bind(color)
}
</style>

  1. Ezra 2023-12-21

    网站打开好慢(-_-||)

    1. Tani (作者)  01-10
      @Ezra

      优化了哈哈

Theme Jasmine by Kent Liao