您的位置：首页 > Web前端 > Vue.js

Vue.js入门之点击切图

2018-05-19 17:12 211 查看

Vue.js入门之点击切图

今天，，，，博主分享的内容是Vue.js入门之点击切图，Vue十个非常火的前端框架，，废话不多说直接贴代码！

第一部分，HTML部分

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> #photo1{ width:200px; height:500px; margin:0 auto; background: url(6.jpg) center no-repeat; background-size:80%; } #photo1-health{ width:200px; height:20px; border:2px black solid; margin:0 auto 20px auto; } #photo1-health div{ background: crimson; height:20px; } #controls { width:200px; margin:0 auto; } #controls button{ margin-left:20px; } #photo1.burst{ background-image:url(7.jpg); } </style></head><body> <div id="Vue-app">  <div id="photo1" v-bind:class="{burst:ended}"></div>  <div id="photo1-health"> <div v-bind:style="{width:health + '%'}"></div> </div>  <div id="controls"> <button v-on:click="punch" v-show="!ended">使劲敲</button> <button v-on:click="restart">重新开始</button> </div>
</div> <script src="app.js"></script> </body></html>

第二部分：VUE部分

new Vue({ el:"#Vue-app", 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; }} });/*el:element需要获取的元素，一定是HTML中的跟容器元素data:用来数据的存储*/

效果图：

点击使劲敲，，，红条不断减小，，到0之后切换成另一图，点重新开始之后，可重复操作！

好了今天的分享就到这里了，，我们下次再见

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航