- Vue.js 2 Web Development Projects
- Guillaume Chau
- 143字
- 2021-07-02 22:34:36
The castles
This one is actually pretty simple since it consists of only two images and a castle-banners component that will take care of the health and food display:
- In the world.js file, create a new castle component with two images that accepts a players and an index prop:
Vue.component('castle', {
template: `<p class="castle" :class="'player-' + index">
<img class="building" :src="'svg/castle' + index + '.svg'" />
<img class="ground" :src="'svg/ground' + index + '.svg'" />
<!-- Later, we will add a castle-banners component here -->
</p>`,
props: ['player', 'index'],
})
For this component, there is a castle and a ground image for each player; that means four images in total. For example, for the player at index 0, there are castle0.svg and the ground0.svg images.
- In the main template, just below the top-bar component, create a new p element with the world CSS class, loop over the players to display the two castles, and add another p element with the land class:
<p class="world">
<castle v-for="(player, index) in players" :player="player"
:index="index" />
<p class="land" />
</p>
In the browser, you should see one castle for each player, as follows:

推薦閱讀
- Debian 7:System Administration Best Practices
- Twilio Best Practices
- Mastering Natural Language Processing with Python
- Java持續交付
- Easy Web Development with WaveMaker
- Effective Python Penetration Testing
- 軟件工程
- Getting Started with NativeScript
- RESTful Java Web Services(Second Edition)
- 微信小程序開發實戰:設計·運營·變現(圖解案例版)
- Python Social Media Analytics
- 數據結構:Python語言描述
- Joomla!Search Engine Optimization
- FusionCharts Beginner’s Guide:The Official Guide for FusionCharts Suite
- jMonkeyEngine 3.0 Beginner’s Guide