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

set v-show to true or false with a function

本文关键字：true false 设置 V-show 函数      更新时间：2023-09-26

我有一个使用 Vue 渲染的属性列表（房屋、公寓,...）。

每个属性的显示与否取决于一些充当筛选器的按钮。这些"过滤器"在我的数据对象中设置：

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

当用户单击选项按钮时，我将这些选项设置为 true 或 false。

目前，我使用当前表达式设置 v-show：

v-show="房间[属性。房间]&&类型[属性。类别]" 

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

。而且它工作正常。但是，我宁愿做这样的事情：

v-show="showProperty（property）"

。并编写返回 true 或 false 的 showProperty（） 函数。

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

Jeff提出的过滤器的使用是要走的路，但我想回答你的直接问题，如果这可以通过函数实现，因为它是。

您只需将函数添加到组件方法对象：

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

看起来像是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
  }
}

如果要使用自定义函数进行筛选，可以：

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

在所有这些之前，请创建过滤器：

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