获取基于Vue数据模型属性的属性名称的值？-Java 学习之路

让's say I have a div like below and my goal is to set it'的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完成？

注意：我意识到我可以在不引用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

回复于 2024-04-19T10:14:55+08:00

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

1 回答

相关问题