这个做个小实例,实现进度条切换图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue.js</title>
<link rel="stylesheet" href="demo07.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<!--根容器-->
<div id="vue-app">
<div id="bag" v-bind:class="{burst:ended}"></div>
<div id="bag-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="app07.js"></script>
</body>
</html>
//实例化对象
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;
}
},
computed:{
}
});
#bag{
width: 500px;
height: 400px;
margin: 0 auto;
background: url("img/02.png") center no-repeat;
background-size: 80%;
border: 1px solid #CCC;
}
#bag.burst{
background: url("img/03.png") center no-repeat;
background-size: 80%;
}
#bag-health{
width: 200px;
border: 2px solid #000000;
margin: 0 auto 20px auto;
}
#bag-health div{
height: 20px;
background: crimson;
}
#controls{
width: 200px;
margin: 0 auto;
}
#controls button{
margin-left: 20px;
}
运行结果:
Vue-组件和多个对象:https://blog.csdn.net/qq_35723619/article/details/83817317