Vuejs2 将v-if逻辑移动到模型

初学者提示…我正在尝试理解如何将我的一些逻辑从视图/HTML移动到Vue实例中。假设我的HTML中有以下代码。我如何将其移动到我的计算属性中

示例HTML：

---

由于我在应用程序中大量使用了

v-if

指令，因此我很想看看将其移动到computed属性会有什么好处。谢谢。

您只需在计算属性中返回经过计算的表达式，即：

var app = new Vue({
    el: '#app',
    data: {
        selectedOffice: '',
        selectedProducts: []
    }
    computed: {
        isSelected: function() {
            return !this.selectedOffice.inJira && this.selectedProducts === 'Movies';
        }
    }
});

在模板中，您可以使用以下内容：

<section v-if="isSelected">

但是，您的逻辑可能存在几个问题，因为：

此.selectedOffice

是一个字符串而不是对象，因此尝试访问

.inJira

可能会有问题。您应该使用declare

selectedOffice

作为空对象

this.selectedProducts

是一个数组，但您正试图将其作为计算属性中的字符串进行求值

---

是的Terry是对的：selectedOffice:{}，selectedProducts:'

var app = new Vue({
    el: '#app',
    data: {
        selectedOffice: '',
        selectedProducts: []
    }
    computed: {
        isSelected: function() {
            return !this.selectedOffice.inJira && this.selectedProducts === 'Movies';
        }
    }
});

<section v-if="isSelected">