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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。