获取基于属性名称的 Vue 数据模型属性的值？

Posted 2023-02-16

【中文标题】获取基于属性名称的 Vue 数据模型属性的值？

【英文标题】：Get value of Vue data model property based property name?

【发布时间】：2017-09-16 07:45:00

【问题描述】：

假设我有一个如下所示的 div，我的目标是根据传递给 getClassText 方法的 vue 数据模型属性的名称，将它的 css 类设置为一些计算的类字符串：

 <div :class="getClassText('lastName')">

有了这个javascript：

 new Vue(
        el: '#app',
        data: 
            firstName: '',
            lastName: ''
        ,
        methods: 
            getClassText: function (fieldName) 
                var valueOfField = NeedHelpHere(fieldName);
                //some complex calculations based on the valueOfFild
                return resultOfComplexCalculations;

            
        
    );

在 NeedHelpHere(fieldName) 方法中，我需要能够返回基于 Vue 数据模型属性的属性名称的值。 Vue如何做到这一点？

注意：我意识到我可以在不引用 lastName 的情况下调用该方法，这会导致属性的值被传入。

<div :class="getClassText(lastName)">

但是为了更好地理解Vue，我想知道如何调用像这样将属性名称作为字符串传递的方法

<div :class="getClassText('lastName')">

使用这种方法，在 NeedHelpHere(fieldName) 方法中，我需要能够返回基于 Vue 数据模型属性的属性名称的值。 Vue如何做到这一点？

【参考方案1】：

如果你不想直接传递值，你可以这样做：

html：

  <div id="app">

    <div :class="getClassText('lastName')">fooo</div>

  </div>

JS部分：

 new Vue(
        el: '#app',
        data: 
            firstName: '',
            lastName: 'my-class'
        ,
        methods: 
            getClassText: function (fieldName) 
              if (this.$data.hasOwnProperty(fieldName)) 
                return this.$data[fieldName]
              
              return
            

        
    );

演示：http://jsbin.com/rutavewini/edit?html,js,output