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