Question

我创建了一个简单的Minesweeper游戏，当涉及到决策时，呈现哪个单元有三种可能性：

未公开的单元格
暴露的地雷细胞
暴露的中性细胞

我创建了一个行组件，该组件呈现该行包含的所有单元格。

<template>
  <div class="row">

    <component 
        v-for="(cell, columnIndex) in row" 
        :key="columnIndex"
    />

  </div>
</template>

我现在必须添加条件语句。在文档中有一个is标记，因此我尝试将代码扩展到

<component 
    v-for="(cell, columnIndex) in row" 
    :key="columnIndex" 
    :is="
        if(cell.revealed){
            if(cell.isMine) {
                <RevealedMineCell/>
            } else {
                <RevealedNeutralCell
                    :mineNeighbours="cell.mineNeighbours"
                />
            }
        } else {
            <UnrevealedCell
                :unrevealedCell="cell"
                :x="columnIndex"
                :y="rowIndex"
                @cellClicked="onCellClicked"
            />
        }
    "
/>

但是我将JavaScript代码与HTML代码混合使用，这是无效的。我只想做这样的伪代码

<component 
    v-for="(cell, columnIndex) in row" 
    :key="columnIndex"
>
    <v-if="cell.revealed && cell.isMine">
        <RevealedMineCell/>
    </v-if>
    <v-else-if="cell.revealed && !cell.isMine">
        <RevealedNeutralCell
            :mineNeighbours="cell.mineNeighbours"
        />
    </v-else-if>
    <v-else>
        <UnrevealedCell
            :unrevealedCell="cell"
            :x="columnIndex"
            :y="rowIndex"
            @cellClicked="onCellClicked"
        />
    </v-else>
</component>

我该如何实现？

Answer 1

您可以在内部方法中实现。

<component 
    v-for="(cell, columnIndex) in row" 
    :key="columnIndex" 
    v-bind="getProps(cell)"
    :is="getCellComponent(cell)"
/>


import RevealedMineCell from ...
import RevealedNeutralCell from ...
import UnrevealedMineCell from ...

...
  methods: {
    getProps (cell) {
        if(cell.revealed){
           if(cell.isMine) {
               return {};
            } else {
               return {
                   mineNeighbours: cell.mineNeighbours
               };
            }
        } else {
            return {
                 unrevealedCell: cell,
                 ...
                 ...
                 cellClicked: this.onCellClicked
                 ...
                 ...
            };
        }
    },
    getCellComponent (cell) {
       if(cell.revealed){
           if(cell.isMine) {
               return RevealedMineCell;
            } else {
               return RevealedNeutralCell;
            }
        } else {
            return UnrevealedCell;
        }
  }
...

根据循环中的条件渲染不同的组件

1 个答案: