Advertisement

Vue3 v-bind绑定CSS中的var变量实现动态样式效果

阅读量：

在实际开发过程中，经常会遇到如下需求：通过点击按钮来调整页面内某一元素的样式。针对此类应用场景，可以借助v-bind指令将CSS中的var变量进行绑定，从而实现对元素样式的动态切换。

例如，在采用setup语法糖的开发环境下，通过点击按钮即可实现对其他元素背景颜色的动态更改。

复制代码 
 <template>

    
   <div class="box">
    
     <div class="intro">
    
       <div class="btxt" :style="{'--text-color':textColor}">使用v-bind绑定语法糖中的颜色常量的值给style中的变量</div>
    
     </div>
    
     <div class="intro">
    
       <div class="btn" @click="changeColor">点击button改变textColor的值，动态更新颜色的值</div>
    
     </div>
    
   </div>
    
 </template>
    
 <script setup>
    
 import { ref } from 'vue'
    
 const textColor = ref("blue");
    
 co

全部评论 (0)

还没有任何评论哟~

相关文章推荐