如何使用方法在 Vue.js 中添加条件样式?
P粉327903045
P粉327903045 2024-03-21 20:53:17
[Vue.js讨论组]

我想根据从父组件传递的 prop 值在子组件中添加条件样式。

这是条件样式的工作示例:

  • 但这仅适用于当我的样式基于单个变量且只能有两个值(true/false)时。

    我想基于可以采用多个值的变量来实现条件样式。假设我将一个字符串从父组件传递到子组件 stylingDecider,其值可以是 stylingClassOnestylingClassTwostylingClassThree

    因此我想做以下事情:

  • 但这确实不起作用。我需要一个方法来决定样式是什么的原因是因为其中会进行一些其他处理,这些处理将返回基于所述处理的类,所以我不能只使用
  • 我做错了什么?请指教,谢谢。 我正在使用 Vue 3 和 bootstrap-vue 3。

  • P粉327903045
    P粉327903045

    全部回复(1)
    P粉653045807

    我刚刚创建了一个工作代码片段:

    Vue.component('child', {
      props: ['dynamicstyle'],
      template: `
    • Hello !!
    `, methods: { getStylingClass(stylingDecider) { return stylingDecider; } } }); var app = new Vue({ el: '#app', data: { stylingDecider: 'stylingClassTwo' } });
    .stylingClassTwo {
      background: green;
    }
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习

    Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号