Question

我试图将参数传递给我进入视图的函数，以便在所述函数上运行代码。

目前我有5个函数基本上都做同样的事情，我试图将它们重构为1，它接受我传递的值并执行一些逻辑。可能更容易解释我尝试用代码做什么。

这是我在视图中的当前代码：

<v-card-text :class="darkBodyPurpleCardClassFix">Manage</v-card-text>
<v-card-text :class="lightBodyPurpleCardClassFix">Fees</v-card-text>

然后，class：

下的computed绑定了这两个函数

lightBodyPurpleCardClassFix(){
  switch (this.$vuetify.breakpoint.name) {
    case 'xs': return '450px';
    case 'sm': return this.mediumLightPurpleBodyCLassList;
    case 'md': return this.mediumLightPurpleBodyCLassList;
    case 'lg': return this.largeLightPurpleBodyCLassList;
    case 'xl': return this.largeLightPurpleBodyCLassList;
  }
},
darkBodyPurpleCardClassFix(){
  switch (this.$vuetify.breakpoint.name) {
    case 'xs': return '450px';
    case 'sm': return this.mediumDarkPurpleBodyClassList;
    case 'md': return this.mediumDarkPurpleBodyClassList;
    case 'lg': return this.largeDarkPurpleClassList;
    case 'xl': return this.largeDarkPurpleClassList;
  }
},

我喜欢做的只是传递一些参数，并在函数中使用这些参数。沿着这些方向的东西

<v-card-text :class="classFix(purple, light)">Manage</v-card-text>

然后使用function这样的内容：

classFix(color, value ){
 doSomethingWithColor(color);
 this.data = value;
};

color和value是我将输入到我自己的代码中的参数，因此我可以使用1个函数调整类列表，而不是现在的少数几个。

编辑：这是一些data元素的样子：

mediumPurpleCreateClassList: ['body-2', 'pb-3', 'pt-2', 'px-2', 'my_dark_purple_section'],
largePurpleCreateClassList: ['subheading', 'pb-3', 'pt-2', 'px-2', 'my_dark_purple_section'],

我想做的就是进入一个函数medium＆amp; purple＆amp; create然后从这些论点中运行我的逻辑。

Answer 1

您可以创建一个方法：

methods: {
    // ...
    classFix(darkOrLight, color) {
        switch (this.$vuetify.breakpoint.name) {
            case 'xs': return '450px';
            case 'sm': return this['medium' + darkOrLight + color + 'ClassList'];
            case 'md': return this['medium' + darkOrLight + color + 'ClassList'];
            case 'lg': return this['large' + darkOrLight + color + 'ClassList'];
            case 'xl': return this['large' + darkOrLight + color + 'ClassList'];
        }
    }
}

在模板中使用（绑定）如下：

<v-card-text :class="classFix('dark', 'purple')">Manage</v-card-text>
<v-card-text :class="classFix('light', 'purple')">Fees< /v-card-text>

推理：

此替代方案利用了JavaScript's property accessor syntax。

基本上，任何存在的财产如：

this.mediumLightPurpleBodyCLassList

可以通过以下方式获取：

this['mediumLightPurpleBodyCLassList']

请注意，[和]之间的内容是字符串。作为字符串，您可以使用任何变量：

var myField = 'mediumLightPurpleBodyCLassList';
this[myField];

无论如何，使用任何常规字符串变量创建/操作该变量：

var myColor = 'LightPurple';
var myField = 'medium' + color + 'BodyCLassList';
this[myField];

并且，在上面提到的classFix方法中，那些变量是函数参数（在一天结束时，它们是局部变量）。

Vuejs将参数从body传递给函数，就像纯JS一样

1 个答案:

推理：