Vue入门基础（实战demo）

时间 2019-12-22

标签 vue 入门基础实战 demo 繁體版

原文原文链接

demo.htmljavascript

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Insert title here</title>
</head>

<body>
    <div id="vue-app-demo">
        <h1>点击屡次换图片demo</h1>
        <!-- 绑定样式 当endstatus 为真 showimgs生效-->
        <div id='img' :class="{showimgs:endstatus}"></div>

        <!--进度-->
        <div id="processing">
            <!-- 绑定样式 长度随health属性变化-->
            <div v-bind:style="{width:health+'%' }"></div>
        </div>

        <!--按钮-->
        <div id="control">
            <!-- 减小health属性值-->
            <button v-on:click='punch' v-show='!endstatus'>点击</button>
            <!-- 重置health属性值-->
            <button @click='restart'>重启</button>
        </div>
    </div>

</body>
<script src="demo.js">
</script>

<style>
    #img {
        width: 200px;
        height: 500px;
        margin: 0 auto;
        background: url(https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3787394858,2652131043&fm=26&gp=0.jpg) center no-repeat;
        background-size: 80%;
    }

    #img.showimgs {
        width: 200px;
        height: 500px;
        margin: 0 auto;
        background: url(https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4235168333,3522708743&fm=26&gp=0.jpg) center no-repeat;
        background-size: 80%;
    }

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

    #processing div {
        height: 20px;
        background: red;
    }

    #control {
        width: 120px;
        margin: 0 auto;
        ;
    }
</style>

</html>

demo.jshtml

new Vue({
    el: '#vue-app-demo',
    data() {
        return {
            health: 100,
            endstatus: false
        }
    },
    methods: {
        punch() {
            this.health -= 10;
            if (this.health <= 0) {
                this.endstatus = true;
            }
        },
        restart() {
            this.health = 100;
            this.endstatus = false;
        }
    },
    computed: { //computerd里的方法都须要return值

    }
});

页面效果vue