書名: 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'],
})
推薦閱讀
- 演進式架構(原書第2版)
- VMware View Security Essentials
- DBA攻堅指南:左手Oracle,右手MySQL
- 深入淺出Spring Boot 2.x
- 自然語言處理Python進階
- Visual C#通用范例開發金典
- .NET 3.5編程
- Mastering ROS for Robotics Programming
- 智能手機APP UI設計與應用任務教程
- LabVIEW虛擬儀器程序設計從入門到精通(第二版)
- Managing Microsoft Hybrid Clouds
- C#程序設計基礎入門教程
- Clojure for Finance
- Python程序設計教程
- Mastering PostgreSQL 11(Second Edition)