使用函数将v-show设置为true或false

我有用Vue呈现的属性（房屋，单位，...）的列表。使用函数将v-show设置为true或false

根据一些像过滤器一样的按钮显示或不显示每个属性。那些“过滤器”在我的数据对象设置：

data: { 
    properties: myPropertiesList, 
    rooms: { 
     1: false, 
     2: false, 
     3: false, 
     4: false, 
    }, 
    type: { 
     flat: false, 
     house: false, 
     field: false 
    } 
},

我设置这些选项上的选项按钮true或false时，用户点击。

目前，我设置V型显示与当前的表达：

v型显示= “房间[property.Rooms] & &类型[property.Category]”

<div v-show="rooms[property.Rooms] && type[property.Category]" 
     class="col-md-3" 
     v-for="property in properties" 
    > 
     <property :property="property"> 
</div>

...它工作正常。但是，我宁愿喜欢做这样的事情：

V-秀= “showProperty（属性）”

...并写showProperty（）函数返回true或假。

是这样的可能吗？
如果是，你在哪里声明函数？我尝试了方法对象，但它不起作用。

来源

2016-03-16 Chuck

从来没有使用Vue的，但你可以在你的数据对象上定义一个方法，传入property.Rooms和property.Category，这将返回一个布尔值。如果你不能这样做，你可以从数据对象外部写入一个函数，传入对象，property.Rooms和property。类别，它也会根据你的逻辑返回一个布尔值。 – ManoDestra

这看起来像一个呼叫为v-for过滤：

... 
data:function(){ 
    properties:MyPropertyList, 
    rooms: [1,2,3,4], 
    types: ['flat','house','field'] 
}, 
... 

<div v-for="property in properties | filterBy Room in rooms | filterBy Category in types" 
    class="col-md-3" 
> 
    <property :property="property"> 
</div>

这将只显示属性如果property.Room是rooms阵列中，和property.Category是types阵列英寸

如果您需要对象中的房间和类型，例如您现在拥有它们，则可以使用计算属性创建用于过滤的数组。

computed:{ 
    roomList:function(){ 
    //go through the rooms object and return an array of the true ones 
    } 
}

如果你要使用自定义功能，您可以进行过滤：拟议

Vue.filter('showPropertyFilter',function(properties, rooms, type){ 
    //return only the properties that should show 
});

来源

2016-03-16 14:05:18 Jeff

问题是我无法使用filterBy，我想我受限于此功能。我需要一个更复杂的方式来决定是否显示属性元素。所以我的想法是使用v-show函数，并且在该函数中给出几个条件的结果返回true或false。 – Chuck

您也可以使用filterBy和自定义函数，请参阅编辑。 – Jeff

这是一篇关于创建自定义过滤器的更深入的文章http://optimizely.github.io/vuejs.org/guide/filters.html – Jeff

过滤器的用法：

<div v-for="property in properties | filterBy showPropertyFilter rooms type">

而之前这一切，创建过滤器由杰夫是要走的路，但我想回答你的直接问题，这是可能与一个函数，因为它是。

您只需将功能添加到组件方法对象：

methods: { 
    showProperty (property) { 
    return this.rooms[property.Rooms] && this.type[property.Category] 
    } 
}

来源

2016-03-16 18:38:52

使用函数将v-show设置为true或false

回答

相关问题