Vue起步之demo

这个做个小实例，实现进度条切换图片

<!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

猜你喜欢