我是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>Vue让你做conditional rendering.你不需要这样做
document.getElementById("admin").style.display = "block";
或类似的东西.
只是使用v-if绑定vuejs.这将为您做到这一点.喜欢
<div id="admin" v-if="Title ==X"></div>
有条件地显示元素的另一个选项是v-show指令.用法大致相同:
<div id="admin" v-show="Title ==X"></div>