vue.js中v-show等指令以及动态绑定calss的小demo

记录一次vue.js学习的小收获

今天刚复习了vue.js的基本指令等知识，也跟着老师敲了一个小demo，感觉还是有点小收获的，记录一下这个小demo。

1、首先看一下效果图

功能：每点击一下“使劲敲”的按钮，进度条就会减少，当进度条减少为0时，就切换到下一张图片。

2、附上源码：

1、html文件

<div id="vue-app">

	<!-- 图片 -->
	
	<div id="bag" :class="{burst:ended}"></div>
	
	
	<!-- 进度情况 -->
	
	<div id="bag-health">
	
	<div :style="{width:health + '%'}"></div>
	
	</div>
	
	
	<!-- 控制按钮 -->
	
	<div id="controller">
	
	<button @click="reduce" v-show="!ended">使劲敲</button>
	
	<button @click="reStart">重新开始</button>
	
	</div>

</div>

2、js文件

new Vue({
    el: '#vue-app',
    data: {
        health: 100,
        ended: false

    },
    methods: {
        reduce: function() {
            this.health -= 10;
            if (this.health <= 0) {
				this.ended = true;
				console.log(this.ended);
            }
        },
        reStart: function() {
				this.health = 100;
				this.ended = false;
        }
    }
});

3、css文件

<style>
	#bag {
	width: 400px;
	height: 300px;
	background: url(images/zly1.jpg) center no-repeat;
	background-size: 80%;
	margin: 0 auto;
	}
	#bag.burst{
	background-image: url(images/zly2.jpg);
	}
	#bag-health {
	width: 400px;
	height: 20px;
	border: 2px solid rebeccapurple;
	margin: 0 auto 20px auto;
	}
	#bag-health div{
	height: 20px;
	background-color: rgb(233, 85, 16);
	}
	#controller{
	width: 180px;
	margin: 0 auto;
	}
</style>

3、接下来就分析一下整体思路:

1、在html里搭好整体的框架，图片、进度条还有按钮；
2、给进度条绑定内联样式，使进度条的长度可以动态改变，先在data里定义为默认100；html里根据百分比动态改变宽度；

3、在按钮里定义方法改变进度条的长度，每点一下，进度条的长度减少10；

4、等进度条的值变为0时，需要更换图片，因此增加一个ended来动态改变图片的样式，当ended为true的时候改变图片并且隐藏“使劲敲”按钮。因此在reduce的方法里加一个判断，当health<= 0时，改变ended的值为true，在html里给图片动态绑定class的样式。

注意：

在改变图片样式的时候，动态的class burst需要在前面加上#bag，不能只写.burst，因为id的优先级高于class, 所以不写id的话无法对图片进行改变，并且#bag和.burst之间不能有空格。