vue学习 13实战DEMO

最新推荐文章于 2024-07-10 13:45:25 发布

扫地鼠Gordon

最新推荐文章于 2024-07-10 13:45:25 发布

阅读量195

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_28137309/article/details/89154604

版权

vue 专栏收录该内容

48 篇文章 2 订阅

订阅专栏

有一些图片，对应一些按钮的触发，触发到一定程度，会更换图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Vue.js</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <!-- vue-app是根容器 -->
    <div id="vue-app">
        <h1> Demo </h1>
        <!-- 图片 -->
        <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="app.js" type="text/javascript"></script>
</body>
</html>

style.css

#bag{
    width: 200px;
    height: 500px;
    margin: 0 auto;
    background: url(img/bag.png) center no-repeat;
    background-size: 80%;
}

#bag.burst{
    background: url(img/bag-burst.png) center no-repeat;
    background-size: 80%;
}


#bag-health{
    width: 200px;
    border: 2px #000 solid;
    margin: 0 auto 20px auto;
}

#bag-health div{
    height: 20px;
    background: crimson;
}


#controls{
    width: 200px;
    margin: 0 auto;
}

#controls button {
    margin-left: 20px;
}

app.js

'use strict';
// 实例化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;
        }
    },
    computed: {

    }
});

扫地鼠Gordon

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习 13实战DEMO

有一些图片，对应一些按钮的触发，触发到一定程度，会更换图片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>Vue.js</title> <link rel="stylesheet" type="t...
复制链接

扫一扫

专栏目录