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

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

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

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

1、首先看一下效果图

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

2、附上源码：

1、html文件

	
	
	

	
	
	
	
	

	
	

	
	
	
	
	
	
	

	
	使劲敲
	
	重新开始
	
	

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文件

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之间不能有空格。