VUE遇到的问题一

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhanghs11/article/details/84946299

<template>
......
  		<bookIndex v-show="showBookStore" align="center"></bookIndex>
......

</template>

<script>

import bookIndex from "./bookStore.vue"
export default {
	data(){
		return {
		}
	  },
	components: {
	    bookIndex,
	  },
}

<template>
	<div id="bookIndex">
		welcome to book store ~
		
		<div id="bag" v-bind:class="{ burst:ended }"></div>
		
		<div id="bag-health">
			<div v-bind:style="{ width:health + '%' }"></div>
		</div>

    <div id="controls">
      <button v-on:click="punch" v-show="!ended">Punch</button>
      <button v-on:click="restart">Restart</button>
    </div>
	</div>
</template>

<script>
export default {
	data(){
		return {
			health: 100,
			ended: false
		}
	 },
	methods: {
	 	punch:function(){
	 		this.health -= 10;
	 		if (this.health <= 0){
	 			this.ended = true;
	 			console.log("this.ended")
	 			console.log(this.ended)
	 		}
	 	},
	 	restart:function(){
	 		this.health = 100;
	 		this.ended = false;
	 	}
	}
}
</script>

<style>	
#bag{
    width: 200px;
    height: 500px;
    margin: 0 auto;
    background: url('./assets/bag.png') center no-repeat;
    background-size: 80%;
}

#bag.burst{
    background-image: url('./assets/bag-burst.png');
}

#bag-health{
    width: 200px;
    border: 2px solid #000;
    margin: 0 auto 20px auto;
    position: relative;
    height: 20px;
}

#bag-health div{    
    background: crimson;
    position: absolute;
}

#controls{
    width: 120px;
    margin: 0 auto;
}
</style>

1. v-bind
   v-bind:class 一个对象，以动态地切换 class
2. 相对定位/绝对定位
   align=“center” 和进度条的递减冲突。
3. 相对定位或绝对定位后，height没有