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之后切换成另一图，点重新开始之后，可重复操作！
好了今天的分享就到这里了，，我们下次再见