Vue实现点击打破沙袋

实现页面具体内容为点击按钮，沙袋下面的血条会逐渐减少，当血条减少为0的时候，沙袋图片更替为破损的沙袋，此外还有一个复原按钮，当点击复原按钮时，沙袋血条回复满格且破损的沙袋恢复成原本的沙袋。

一、技术要点

1.v-if&v-show函数

v-if="show"
//v-show="show"

此时，被添加此属性的标签会显示(v-show相同)

v-if="!show"
//v-show="!show"

此时，被添加此属性的标签会隐藏(v-show相同)

（1）两个标签的区别

v-if=“!show” 在运行的时候会将被隐藏的标签在代码中直接去除，显示的时候会再次出现。v-show=“!show” 则通过style中的display来控制隐藏和显示。

2.血条减少功能

血条减少需要实现这条关键代码：

style="{width:hlos+"%"}"

（1）由于需要通过CSS控制血条颜色的增加，则需要控制需求的div的width属性以百分比的形式增减。
（2）在数据渲染部分对hlos进行赋值。
（3）methods中，按钮点击触发konck函数，函数体中有一个基本的if-else语句。
1>判断依旧为血条是否为0，当血条不为0，则hlos减少20，意为width减少20%
2>当血条归零则控制show为true，此时便可以实现切换两个图片。

二、实现代码

注：如果需要了解代码结构，请参考上一篇文章。

<template>
  <div class="app">
    <img src="../src/assets/1.png" v-if="!shows" class="img01" >
    <img src="../src/assets/2.png" v-if="shows" class="img02">
    <div class="div01">
      <div class="div02" :style="{width:hlos + '%'}">
      </div>
    </div>
    <button class="btn01" @click="knock">使劲敲</button>
    <button class="btn02" @click="restart">重新开始</button>
  </div>
</template>
<script>
  export default({
    data(){
      return{
        shows:false,
        hlos:100
      }
    },
    methods:{ 
      knock(){
        if(this.hlos != 0){
          this.hlos -= 20
        }else{
          this.shows = true
        }
      },
      restart(){
        this.hlos=100;
        this.shows = false
      }
    }
  })
</script>
<style scoped>
.img01,.img02{
  margin-left: 700px;
  width:15%;
}
.div01{
  width: 500px;
  height: 30px;
  border: 2px solid black;
  margin-top: 100px;
  margin-left: 600px;
}
.div02{
  width: 500px;
  height: 30px;
  background-color: red;
}
.btn01,.btn02{
  width: 160px;
  height: 30px;

}
</style>

三、运行结果