我们要实现的图类似于下面的这样:
点击使劲敲,下面的进度条进行减少,敲完后出现下面的图片。同时使劲敲的button消失,恢复原状后变成最上面的图。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="app">
<h1>vue demo案例一</h1>
<div id="bag" v-bind:class="{burst: ended}">
</div>
<div id="bag-health">
<div v-bind:style="{width: health +'%'}"></div>
</div>
<div id="control">
<button v-on:click="punch" v-show="!ended">
使劲敲
</button>
<button v-on:click="restart">
恢复原状
</button>
</div>
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
app.js
new Vue({
el: '#app',
data: {
health: 100,
ended: false
},
methods: {
punch: function() {
this.health -= 20;
if(this.health <= 0){
console.log(this.ended)
this.ended = true;
}
},
restart: function() {
this.health = 100;
this.ended = false;
}
},
computed: {
}
});
style.css
#bag {
width: 200px;
height: 500px;
margin: 0 auto;
background: url(img/bag.png) center no-repeat;
background-size: 80%;
}
#bag.burst {
background-image: url(img/bag-burst.png);
}
#bag-health{
width: 200px;
border: 2px #000 solid;
margin: 0 auto 20px auto;
}
#bag-health div{
height: 20px;
background: crimson;
}
#control{
width: 200px;
margin: 0 auto;
}
#control button{
margin-left: 20px;
}
Vue系列文章目录
- vue系列文章(1):对象绑定,属性绑定
- Vue系列文章(2)事件绑定,鼠标点击事件
- vue系列文章(3):事件修饰符
- Vue系列文章(4)键盘事件及键盘修饰符
- vue系列文章(5)双向数据绑定
- vue系列文章(6)计算属性computed
- vue系列文章(7)动态CSS类型绑定
- vue系列文章(8)条件渲染
- vue系列文章(9)v-for条件循环
- vue系列文章(10)vue实战项目demo
- vue系列文章(11):初始化多个实例对象
- vue系列文章(12)初始组件的应用
- Vue系列文章(13)vue cli脚手架
- vue系列文章(14)vue-cli脚手架,组件嵌套,全局组件注册和局部组件注册
- vue系列文章(15)属性传值props
- vue系列文章(16)传值和传引用的类型和区别
- vue系列文章(17)利用事件传递将子组件值传递给父组件
- vue系列文章(18)vue生命周期
- vue系列文章(19)vue路由配置
- vue系列文章(20) vue网络请求vue-resource
如果上面文章对你有用,打赏下我吧@*@