- Vue.js 2 Web Development Projects
- Guillaume Chau
- 115字
- 2021-07-02 22:34:35
The 'game over' overlay
For this one, we will create another component called player-result that will show whether a player is victorious or defeated. We will display the name of the player passed with a prop. We will compute the result for this player with a computed property, which we will also use as a dynamic CSS class:
Vue.component('player-result', {
template: `<p class="player-result" :class="result">
<span class="name">{{ player.name }}</span> is
<span class="result">{{ result }}</span>
</p>`,
props: ['player'],
computed: {
result () {
return this.player.dead ? 'defeated' : 'victorious'
},
},
})
Now, we can create the game over overlay by looping over the players props and using the player-result component:
Vue.component('overlay-content-game-over', {
template: `<p>
<p class="big">Game Over</p>
<player-result v-for="player in players" :player="player" />
</p>`,
props: ['players'],
})
推薦閱讀
- Building a Home Security System with Raspberry Pi
- 深度學(xué)習(xí)經(jīng)典案例解析:基于MATLAB
- Learning Bayesian Models with R
- Unity 5.x By Example
- 軟件工程
- Android Native Development Kit Cookbook
- 編程數(shù)學(xué)
- Raspberry Pi Home Automation with Arduino(Second Edition)
- Statistical Application Development with R and Python(Second Edition)
- 深入實踐Kotlin元編程
- 區(qū)塊鏈架構(gòu)之美:從比特幣、以太坊、超級賬本看區(qū)塊鏈架構(gòu)設(shè)計
- Python全棧開發(fā):基礎(chǔ)入門
- Learning Cocos2d-JS Game Development
- Google Maps JavaScript API Cookbook
- Django 2.0 入門與實踐