不改变html内容的情况下，如何实现shoudShowUsers方法？如何书写完整代码？
官方文档给出了好例子的代码如下：
<ul v-if="shouldShowUsers">
<li v-for="user in users" :key="user.id">
{{ user.name }}
</li>
</ul>下面是自己写的完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<!-- 好例子代码 -->
<ol v-if="shouldShowUsers">
<li v-for="user in users" :key="user.id">
{{ user.name }}
</li>
</ol>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
users:[
{id:1, name:'用户1', isActive: true},
{id:2, name:'用户2', isActive: false},
{id:3, name:'用户3', isActive: true},
{id:4, name:'用户4', isActive: false},
{id:5, name:'用户5', isActive: true},
]
},
computed: {
shouldShowUsers: function () {
this.users = this.users.filter(function (user) {
return user.isActive;//返回isActive=true的项，添加到activeUsers数组
});
return true;
}
}
})
</script>
</body>
</html>
你这个代码现在看上去好像没什么问题吧。
vue 2.0和3.0似乎不一样，你用的是2.0吗？
1.定义一个showUser,v-for循环使用
2.定义一个shouldShowUsers,v-if使用
showUsers(){
return this.users.filter(u=>u.isActive) ;
},
shouldShowUsers(){
return this.showUsers && this.showUsers.length > 0 ;
}您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~
如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～
ps:问答VIP仅需29元，即可享受5次/月 有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632