獲取基於Vue數據模型屬性的屬性名稱的值？

Question

比方說，我有一個div像下面和我的目標是把它的CSS類基於傳遞給getClassText方法的VUE數據模型屬性的名稱類的一些計算的字符串：

<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怎麼做？

注：我知道我可以調用該方法無需引用姓氏這將導致在傳遞屬性值

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

但對於理解Vue公司更好的緣故，我想。知道如何調用該方法傳遞屬性名作爲一個字符串這樣

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

採取這種辦法，在NeedHelpHere(fieldName)方法，我需要能夠返回Vue的數據模型基於屬性的屬性名的值內。 Vue怎麼做？

Answer 1

如果你不希望直接pass值，你可以做這樣的：

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