vue的v-for里的大胡子语法里在引号里面怎么用?

Question

1.v-for里面用到了判断v-if,判断的条件来自于v-for里面的值
2.代码如下:

<div v-for="item in items">
    <div v-if="{{item.num}}>0">
        abc
    </div>
    <div v-else>
        efg
    </div>
</div>

3.这样vue就报错了,虚心求教,万分感谢;

Answer 1

楼主，你好！你的写法有问题的。试试下面这个，

<div v-for="item in items">
   // 这里不是 {{item.num}} > 0
    <div v-if="item.num > 0">
        abc
    </div>
    <div v-else>
        efg
    </div>
</div>

---

如有帮助，麻烦点击下采纳，谢谢~

Answer 2

避免 v-if 和 v-for 用在一起 必要
永远不要把 v-if 和 v-for 同时用在同一个元素上。

一般我们在两种常见的情况下会倾向于这样做：

为了过滤一个列表中的项目 (比如 v-for="user in users" v-if="user.isActive")。在这种情形下，请将 users 替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表。

为了避免渲染本应该被隐藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers")。这种情形下，请将 v-if 移动至容器元素上 (比如 ul, ol)。

比如：

 <ul>
     <li v-for="item in filterNum">{{item}}</li>
 </ul>
computed: {
            filterNum(){
                const data = [
                    { num:1, },
                    { num:2, },
                    { num:3, },
                    { num:-1, },
                    { num:-2, },
                ]
                return data.map(item => item.num>0 ? 'abc':'efg')
            },
        },