Vuejs 像纯 JS 一样将参数从 body 传递给函数答案

【问题标题】：Vuejs pass arguments from body to function like pure JSVuejs 像纯 JS 一样将参数从 body 传递给函数
【发布时间】：2018-03-28 01:21:13
【问题描述】：

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

目前我有 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 & purple & create，然后根据这些参数运行我的逻辑。

【问题讨论】：

你能显示this.mediumLightPurpleBodyCLassList和this.largeDarkPurpleClassList或其他人是什么吗？
好了，更新了问题！
这是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']; } } 吗？用法示例：classFix('dark', 'purple')
点赞：<v-card-text :class="classFix('dark', 'purple')">Manage</v-card-text> <v-card-text :class="classFix('light', 'purple')">Fees</v-card-text>
你必须在方法中声明它。

标签： vue.js vuetify.js

【解决方案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 方法中，这些变量是函数参数（归根结底，它们是局部变量）。

【讨论】：