如何过滤$ {{data}}对象以仅显示特定值?

时间:2019-03-30 11:48:52

标签: vue.js

我正在使用vue.js并转储我的数据$ {{data}}并将其输出给用户,但是,我只想显示特定的值。在这种情况下,我想显示所有内容,但不显示操作。

我只想显示:名称,说明和方法。

{
  "Name": "",
  "Description": "",
  "Actions": [
    {
      "Actions": "Microsoft.AAD/domainServices/oucontainer/write"
    },
    {
      "Actions": "Microsoft.AAD/domainServices/oucontainer/delete"
    },
    {
      "Actions": "Microsoft.AAD/domainServices/oucontainer/read"
    }
  ],
  "Method": "a,b,c,d,"
}

1 个答案:

答案 0 :(得分:1)

您可以创建一个可以为您完成此操作的方法。

首先创建一个我将使用传播语法的方法。还要检查此链接。

https://codingexplained.com/coding/front-end/vue-js/working-with-methods-in-vue-js

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    actions : ["this i it", "abc"],
    lovely: "asdf"

  },
  methods : {
    getData : function(){           
        let {actions, ...dataExceptAction} = this.$data;
        return dataExceptAction;
    }
  }

})

现在我可以在模板上简单地使用getData方法

<div id="app">
  <p>{{ getData()  }}</p>
</div>

此处的工作示例 https://jsfiddle.net/3cy2roLp/45/