进度条 及变图
<!-- Vue--应用demo1 -->
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue.js</title>
<link rel="stylesheet" href="styledemo1.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="vue-app">
<!-- 图片 -->
<div id="beauty" v-bind:class="{turn:ended}"></div>
<!-- 进度条 -->
<div id="beauty-percent">
<div v-bind:style="{width:percent+'%'}"></div>
</div>
<div id="control">
<button v-on:click="change" v-show="!ended">变身</button>
<button v-on:click="restart">还原</button>
</div>
</div>
<script src="appdemo1.js"></script>
</body>
</html>
new Vue({
el:"#vue-app",
data:{
percent:100,
ended:false,
},
methods:{
change: function(){
this.percent -= 10;
if( this.percent <= 0){
this.ended = true;
}
},
restart: function(){
this.percent = 100;
this.ended = false;
}
},
computed:{
}
});
#beauty{
height: 400px;
width: 400px;
margin:0 auto;
background: url(1.jpg) center no-repeat;
background-size: 80%;
}
#beauty.turn{
background: url(2.jpg); center no-repeat;
}
#beauty-percent{
width: 320px;
margin:10px auto 1px;
border: 2px solid #000;
}
#beauty-percent div{
height: 20px;
background-color: red;
}
#control{
width: 200px;
margin:10px auto;
}
#control button{
margin-left: 30px;
}
