Vue使用v-bind动态绑定CSS样式

2024-03-01 0 284
目录
  • 语法格式:
  • 基础使用:

在Vue3中,可以通过 v-bind 动态绑定 CSS 样式。

语法格式:

color: v-bind(数据);

基础使用:

<template>
<h3 class=\”title\”>我是父组件</h3>
<button @click=\”state = !state\”>按钮</button>
</template>

<script setup>
import { ref } from \”vue\”;
let state = ref(true);
</script>

<style scoped>
.title {
/* 使用 v-bind 绑定 CSS 样式 */
color: v-bind(\”state ? \’red\’ : \’blue\’\”);
}
</style>

Vue使用v-bind动态绑定CSS样式

注:v-bind中可以不加双引号,这里只是避免 vscode 语法警告。

到此这篇关于Vue使用v-bind动态绑定CSS样式的文章就介绍到这了,更多相关Vuev-bind绑定CSS内容请搜索悠久资源网以前的文章或继续浏览下面的相关文章希望大家以后多多支持悠久资源网!

您可能感兴趣的文章:

  • Vue3新属性之css中使用v-bind的方法(v-bind in css)
  • vue中v-bind和v-model的区别详解
  • vue3 v-bind="$attrs"继承组件全部属性的解决方案
  • Vue中指令v-bind动态绑定及与v-for结合使用详解
  • vue如何动态绑定img的src属性(v-bind)
  • Vue.js中v-bind指令的用法介绍

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悠久资源 JavaScript Vue使用v-bind动态绑定CSS样式 https://www.u-9.cn/biancheng/javascript/182443.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务