vue学习 九 基础事例demo
vue学习 九 基础事例demo
meihuasheng
发布于 2021-03-16 21:37:25
发布于 2021-03-16 21:37:25
为了更好的理解之前的各类知识，认真的实现下面的demo很有必要。。。
就是当点击“掉血”按钮后，进度条的血减10%，然后一直点到0的时候图片就会变成另外一张打坏了的图片。。
事例代码如下，图片可以随便两张吧，简单实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Vue 测试实例 </title>
<!--通过cdn的方式加载入vue文件-->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style type="text/css">
#bag{
width: 200px;
height: 500px;
margin: 0 auto;
background: url(?developer/article/1802877/img/bag.png) center no-repeat;
background-size: 80%;
}
#bag.burst{
background-image: url(?developer/article/1802877/img/bag-burst.png);
}
#bag-health{
width: 200px;
border: 2px solid #000;
margin: 0 auto 20px auto;
}
#bag-health div{
height: 20px;
background: crimson;
}
#controls{
width: 200px;
margin: 0 auto;
}
#controls button{
margin-left: 10px;
}
</style>
</head>
<body>
<div id="app">
<!--图片 当血条为0的时候变图片-->
<div id="bag" v-bind:class="{burst:ended}"></div>
<!--进度情况 让血条的百分比和health同步-->
<div id="bag-health">
<div v-bind:style="{width:health+'%'}"></div>
</div>
<!--控制按钮-->
<div id="controls">
<!--执行punch方法，每次触发数值减10-->
<button v-on:click="punch" v-show="!ended">使进度条掉血</button>
<!--执行restart方法，恢复原样-->
<button v-on:click="restart">重新开始</button>
</div>
</div>
<script>
//实例化vue对象
new Vue({
el: '#app', //element 获取元素
data: { //用于数据的存储
health:100, //定义血条
ended:false
},
methods:{ //用于各种方法的定义
punch:function(){
this.health-=10;
if(this.health<=0){
this.ended=true;
}
},
restart:function(){
this.health=100;
this.ended=false;
}
}
});
</script>
</body>
</html>本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-08-12 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读