Question

我在Vue.js做了一场杯赛，那里有N个杯子，其中一个杯子里面有一个骰子。

<cup cupid="a" @onGameStateChange="onGameStateChange" ref="cup" />
<cup cupid="b" @onGameStateChange="onGameStateChange" ref="cup" />
<cup cupid="c" @onGameStateChange="onGameStateChange" ref="cup" />

我现在想要将这些杯子洗净，以便在游戏区域周围移动任何杯子。当然，这意味着我必须移动DOM元素。

但是我似乎对如何在Vue.js中实现这一点感到困惑。我尝试将一个ref（如上所述）附加到所有杯子上，然后获得所有杯子的DOM元素参考，但现在我有点想知道我将如何改变那些杯子。

我还尝试从v-for中的数据数组加载杯子，然后将杯子数据属性改组，但在视觉上它似乎没有做任何事情。我也通过计算属性尝试过它。

使用Vue.js，第一条规则不是直接操纵DOM，那么我将如何实现呢？

Answer 1

以MVVM的方式思考。你的游戏和三杯只是数据，不要与DOM混合。

我写了一个例子。使用数组存储杯子。使用'v-for'生成DOM。通过“随机排序”或“随机数组索引”来洗牌！

var demo = new Vue({
  el: '#demo',
  data: {
    cups: [{name: "cup1"}, {name: "cup2"}, {name: "cup3", imhere: true}]
  },
  methods: {
      shuffleCups() {
        this.cups.sort((a, b) => Math.random() > .5 ? -1 : 1);
      }
    },
})

<script src="https://unpkg.com/vue@2.5.16/dist/vue.min.js"></script>
<div id="demo">
    <button @click="shuffleCups">Shuffle</button>
    <div v-for="cup in cups"> {{ cup.name }}
      <span v-if="cup.imhere" style="color: red">*</span>
    </div>
</div>

更新：写完这段代码后，我找到了an example on vuejs.org，它还显示了“过渡与动画”效果。

Vue.js随机播放组件

1 个答案: