如何使用方法在 Vue.js 中添加条件样式?
P粉327903045
P粉327903045 2024-03-21 20:53:17
0
1
431

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

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

<li v-bind:class="[booleanValue ? 'stylingClassOne' : 'stylingClassTwo']"

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

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

因此我想做以下事情: <li v-bind:class="getStylingClass(stylingDecider)"> 但这确实不起作用。我需要一个方法来决定样式是什么的原因是因为其中会进行一些其他处理,这些处理将返回基于所述处理的类,所以我不能只使用 <li v-bind:class="stylingDecider"

我做错了什么?请指教,谢谢。 我正在使用 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;
}
sssccc
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板