Vue的v-show不能是数组的元素值

487 阅读1分钟

以下无法实现v-show块的展示和隐藏

<ul>
    <li v-show="isDisplay[0]">
        0
    </li>
<ul>
<button @click="change">change</button>
// vue data
data() {
    return {
        isDisplay: [true],
    }
}
// vue methods
methods: {
    change() {
        return !this.isDisplay[0];
    }
}

但如果数组中的元素是对象,就可以实现:

<ul>
    <li v-show="isDisplay[0].value">
        0
    </li>
<ul>
<button @click="change">change</button>
// vue data
data() {
    return {
        isDisplay: [{value: true}],
    }
}
// vue methods
methods: {
    change() {
        return !this.isDisplay[0].value;
    }
}