《游戏学习》html5 仿支付宝小鸡农场vue版本，2024年最新前端开发学习方法

{{content}}{{setTime}}

<component

:is=“chick.componentHat”>

<component

:is=“chick.componentClothes”>

换装

<i class=“ivu-icon ivu-icon-md-close-circle” @click=“hidePopup”>

v-for=“suit in suits”

:key=“suit.name”

:class=“[‘opt-btn’, { active: chick.currentSuit === suit.id && chick.currentHat === suit.id && chick.currentClothes === suit.id}]”

@click=“replaceDress(0,suit.id)”>

{{ suit.name }}

v-for=“hat in hats”

:key=“hat.name”

:class=“[‘opt-btn’, { active: chick.currentHat === hat.id}]”

@click=“replaceDress(1,hat.id)”>

{{ hat.name }}

v-for=“clothe in clothes”

:key=“clothe.name”

:class=“[‘opt-btn’, { active: chick.currentClothes === clothe.id}]”

@click=“replaceDress(2,clothe.id)”>

{{ clothe.name }}

首饰饰品开发中…

眼睛饰品开发中…

商店

<i class=“ivu-icon ivu-icon-md-close-circle” @click=“hidePopup”>

商店功能开发中...

背包

<i class=“ivu-icon ivu-icon-md-close-circle” @click=“hidePopup”>

{{food.name}}

{{food.num}}

购买

解锁

{{good.name}}

{{good.num}}

暂无物品

学习

<i class=“ivu-icon ivu-icon-md-close-circle” @click=“hidePopup”>

未学习

学习中

已学完

{{item.name}}

学习功能开发中...

我是一只鸡

<Modal v-model=“modalUser”

class-name=“hide-footer”

@on-ok=“keepUser”>

{{user.name}}<Icon type=“ios-create” @click=“editUser”/>

等级：{{chick.level}}

粉丝：0

积分：0

段位：0

修改用户名需要1000金币

<i-button type=“primary” @click=“saveUser”>保存

<Modal :value=“modalLevel” @on-ok=“levelUser”>

升级了

恭喜您升到 {{chick.level}} 级了！

<Modal :value=“modalShop”

@on-ok=“shopSettle”

@on-cancel=“hideShop”>

{{currFood.name}}

单价：${{currFood.price}}/个

总价：${{currFood.price * shoppingNum}}

<Modal :value=“modalFood”

class-name=“hide-footer”

@on-cancel=“hideFood”>

物品名称：{{currFood.name}}

拥有数量：{{currFood.num}}

进食时长：{{currFood.eatTime | SecondToDate}}

获得经验：{{currFood.exp}}

<i-button type=“primary” @click=“feedClick”>喂食

<Modal :value=“modalGood”

class-name=“hide-footer”

@on-cancel=“hideGood”>

物品名称：{{currGood.name}}

拥有数量：{{currGood.num}}

出售价值：{{currGood.price}}

<i-button type=“primary” @click=“setSell”>出售

{{currGood.name}}

出售总价：${{currGood.price * sellNum}}

<i-button type=“primary” @click=“commitSell”>出售

<Modal v-model=“modalAchievement” class-name=“hide-footer” @on-cancel=“hideAchievement”>

成就数量：{{targetList}}/{{achievement.length}}

• {{item.title}}{{item.completeCurrCount}}/{{item.completeNeedCount}}

  {{item.desc}}

  {{item.profit}}

  领取奖励

  已完成

  <Modal :value=“modalUnlock”

  @on-ok=“commitUnlock”

  @on-cancel=“hideUnlock”>

  确定解锁吗？

  解锁需要：${{currFood.unlockPrice}}

  <c-subject @outsubject=“hideSubject” :showsubject=“isSubject”>