Question

我是vuejs的新手。令人印象深刻的框架，所以我正在学习如何重新做我通常用jueery与vue.js做的所有其他事情。我面临的主要问题是在一个方法中，我试图显示或隐藏一个div，不管条件是否满足。它没有准确地工作。它确实显示，但从未隐藏。如果两个用户都已登录，则admin div仅应存在。

<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/tachyons/css/tachyons.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        .panel-footer {

            height: 40px !important;
        }

        body {
            font-size: 18px;
        }

        .blue {
            color: #0079C2;
        }

    </style>
</head>

<body>
    <div id="app">hello world
    </div>
    
    <script type="text/javascript" src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                items: [],
                Title: ""
            },
            created: function() {
                this.getCurrentUser();
            },
            methods: {
                getCurrentUser: function() {
                    var root = 'https://example.com';
                    var headers = {
                        accept: "application/json;odata=verbose"

                    }
                    var vm = this;
                    var __REQUESTDIGEST = '';
                    $.ajax({
                        url: root + "_api/web/currentuser",
                        type: 'Get',
                        headers: headers,
                        success: function(data) {

                            vm.Title = data.d.Title;
                            console.log(vm.Title)
                            if (vm.Title == "Marks, Wendy" || "Adams, Todd") {
                                document.getElementById("admin").style.display = "block";
                            }else
                            
                            {
                             document.getElementById("admin").style.display = "none";

                            }


                        }

                    })

                },

             
            }
        })

    </script>

</body>

Answer 1

Vue可让您conditional rendering。你不需要像

那样做

 document.getElementById("admin").style.display = "block";

或类似的东西。

只使用v-if的{{1}}绑定。这将为您做到这一点。喜欢

vuejs

有条件地显示元素的另一个选项是<div id="admin" v-if="Title ==X"></div>指令。用法基本相同：

v-show

vue.js基本显示/隐藏方法内部

1 个答案: