(腾讯课堂学习小demo:https://ke.qq.com/course/256052)

一、简单的指令应用 ——打击灭火器

图片素材点击腾讯课堂的链接获取

vue-小demo、小效果 合集(更新中...)vue-小demo、小效果 合集(更新中...)     vue-小demo、小效果 合集(更新中...)

html:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="author" content="xing.org1^-^">
 6     <title>敲烂灭火器</title>
 7     <link rel="stylesheet" href="style.css">
 8     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 9 </head>
10 <body>
11     <div id="app">
12         <div class="img-box" v-bind:class="{imgburst:ended}"></div>
13         <div v-show="!ended">生命值剩余:{{health}} %</div>
14         <div v-show="ended">你赢了!</div>
15         <div class="progress">
16             <div class="progress-child" v-bind:style="{width: health + '%'}"></div>
17         </div>
18         <div class="button-box">
19             <button class="btn1" v-on:click="blow" v-bind:class="{disabled: ended}" >使劲敲</button>
20             <button v-on:click="restart">重新开始</button>
21         </div>
22     </div>
23     <script src="vueJson.js"></script>
24 </body>
25 </html>
html

相关文章:

  • 2021-11-03
  • 2021-09-21
  • 2021-11-29
  • 2022-12-23
  • 2021-12-19
  • 2021-12-15
  • 2021-11-12
  • 2021-08-19
猜你喜欢
  • 2021-06-30
  • 2022-12-23
  • 2021-12-08
  • 2021-09-29
  • 2021-10-25
相关资源
相似解决方案