Vue入門基礎（if 和 show 指令）

時間 2019-12-22

標籤 vue 入門基礎指令简体版

原文原文鏈接

ifshow.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-ifshow">
        <h1>if 和 show 指令</h1>
        <!-- if 和show的最大區別是 if 會隱藏頁面上非爲真的相關標籤代碼 -->
        <button v-on:click='error=!error'>修改error的值</button>
        <button v-on:click='success=!success'>修改success的值</button>
        <p v-if='error'>if 當error=ture時顯示</p>
        <p v-else-if='success'>if success=ture時顯示</p>
        <p v-else>if 當error success都爲false時顯示</p>

        <p v-show='error'>show 當error=ture時顯示</p>
        <p v-show='success'>show 當success=ture時顯示</p>
    </div>

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

</html>

ifshow.jshtml

new Vue({
    el: '#vue-app-ifshow',
    data() {
        return {
            error: false,
            success: false
        }
    },
    methods: {

    },
    computed: { //computerd裏的方法都須要return值

    }
});

頁面效果vue

相關標籤/搜索

每日一句

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