zoukankan      html  css  js  c++  java
  • vue的使用规范之v-if 与 v-for 一起使用

    当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级,这意味着 v-if 将分别重复运行于每个 v-for 循环中

    所以,不推荐v-if和v-for同时使用

    使用推荐方式:

    <div v-if="proxyconfig.ip instanceof Object ">
        <el-tag :type="proxyconfig.status_color" v-for="ip in proxyconfig.ip.split('
    ')" >
            {{ip}} {{proxyconfig.status_text[ip]}}
        </el-tag>
    </div>
    <div v-else>
        <el-tag :type="proxyconfig.status_color" v-for="ip in proxyconfig.ip.split('
    ')">
            {{ip}} {{proxyconfig.status_text}}
        </el-tag>
    </div>

    或者:放在计算属性遍历

    computed: {
        activeUsers: function () {
            return this.users.filter(function (user) {
                return user.isActive
            })
        }
    }
    <ul>
        <li
            v-for="user in activeUsers"
            :key="user.id"
            >
            {{ user.name }}
        </li>
    </ul>

    当它们处于同一节点,v-for 的优先级比 v-if 更高,这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你想为仅有的一些项渲染节点时,这种优先级的机制会十分有用,如下:

    <li v-for="todo in todos" v-if="!todo.isComplete">
    {{ todo }}
    </li>

    上面的代码只传递了未完成的 todos。

    而如果你的目的是有条件地跳过循环的执行,那么可以将 v-if 置于外层元素 (或 <template>)上。如:

    <ul v-if="todos.length">
    <li v-for="todo in todos">
    {{ todo }}
    </li>
    </ul>
    <p v-else>No todos left!</p>
  • 相关阅读:
    (转)GNU风格ARM汇编语法指南(非常详细)5
    (转)ARM GNU常用汇编语言介绍
    RH850 FCL的使用
    RL78 FDL和FSL的使用
    RH850 中断相关
    关于const类型指针变量的使用
    Linux内核中双向链表的经典实现
    RL78 定义常量变量在指定的地址方法
    RL78 RAM GUARD Funtion
    AUTOSAR-Specification of Watchdog Manager 阅读
  • 原文地址:https://www.cnblogs.com/cherylgi/p/13405645.html
Copyright © 2011-2022 走看看