好家伙，

1.条件渲染v-if

1.1.v-if基本使用

<body>

    <div id="app">

       <p v-if="flag">这是v-if控制的</p>

       <p v-show="flag">这是v-show控制的</p>

       <p v-if="false">这是v-if控制的</p>

       <p v-show="false">这是v-show控制的</p>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

    <script>

        const vm = new Vue({

            el:'#app',

            data:{

                flag:true,

                false:false,

                count:1,

            },

        })

    </script>

</body>

1.2.(隐藏)实现原理

(1) v-show的原理是：动态为元素添加或移除 display：none 样式，来实现元素的显示和隐藏。

如果要频繁的切换元素的显示状态，用v-show 性能会更好

(2) v-if的原理是：每次动态创建或移除元素，实现元素的显示和隐藏

1.3.v-if的配套语句

有v-if那么肯定少不了v-else,

其必须要和v-if搭配使用,否则不会被识别

有了v-else,那么肯定少不了v-else-if,

其充当v-if的"else-if"块,可以连续使用

举例如下:

 <div id="app">

       <div v-if="type ==='A'">1111</div>

       <div v-else-if="type ==='B'">2222</div>

       <div v-else-if="type ==='C'">3333</div>

       <div v-else>4444</div>

 </div>

2.列表渲染

vue 提供了v—for列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。

v-for指令需要使用item in items 形式的特殊语法，其中：

items是待循环的数组,item是被循环的每一项

用法如下:

<body>

    <div id="app">

       <table>

           <thead>

               <th>索引</th>

               <th>id</th>

               <th>姓名</th>

           </thead>

           <tbody>

               <tr v-for="item in list" >

               <td>{{ item.id }}</td>

               <td>{{ item.id }}</td>

               <td>{{ item.name }}</td>

            </tr>

           </tbody>

       </table>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

    <script>

        const vm = new Vue({

            el:'#app',

            data:{

               list:[

                   { id: 1,name: 'panghu'},

                   { id: 2,name: 'fattiger'},

                   { id: 3,name: '张三'},

               ]

            },

            methods:{

             }

        })

    </script>

</body>

效果如下:

2.2.补充

v-for指令还支持一个可选的第二个参数,即当前项的索引,语法格式为{item,index} in items, //item,index都是形参,可改名

2.3.v-for的key值

当我们使用v-for时,我们需要为其声明一个key值,

key的作用:让每个item有一个唯一的识别身份

像是item的身份证,防止紊乱,且方便指向

key的注意事项:

①key的值只能是字符串或数字类型

②key的值必须具有唯一性（即：key的值不能重复）

③ 建议把数据项id属性的值作为key的值,一般情况如此（因为id属性的值具有唯一性）

④使用index的值当作key的值没有任何意义（因为index的值不具有唯一性）

⑤建议使用v-for指令时一定要指定key的值（既提升性能、又防止列表状态紊乱）

That's all

第六十三篇：Vue的条件渲染与列表渲染的更多相关文章

  1. 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法

    Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...

  2. Vue学习计划基础笔记(三)-class与style绑定,条件渲染和列表渲染

    Class与style绑定.条件渲染和列表渲染 目标: 熟练使用class与style绑定的多种方式 熟悉v-if与v-for的用法,以及v-if和v-for一起使用的注意事项 class与style ...

  3. react 入坑笔记（五） - 条件渲染和列表渲染

    条件渲染和列表渲染 一.条件渲染 条件渲染较简单,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI. 贴一个小栗子: funct ...

  4. vue.js循环for（列表渲染）详解

    vue.js循环for(列表渲染)详解 一.总结 一句话总结: v-for <ul id="example-1"> <li v-for="item in ...

  5. Vue.js学习 Item7 -- 条件渲染与列表渲染

    v-if 在字符串模板中,如 Handlebars,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {{#if ok}} <h1>Yes</h1 ...

  6. angular,vue,react的基本语法—双向数据绑定、条件渲染、列表渲染、angular小案例

    基本语法: 1.双向数据绑定 vue 指令:v-model="msg" react constructor(){ this.state{ msg:"双向数据绑定" ...

  7. vue的条件渲染和列表渲染介绍

    一.条件渲染 1.v-if语句 <div v-if="seen">hahahah</div> <!-- v-if插入或者删除元素的指令 --> ...

  8. vue 条件渲染与列表渲染

    本文是对官方文档的整理 因为 v-if 是一个指令,所以必须将它添加到一个元素上.但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v ...

  9. vue class与style绑定、条件渲染、列表渲染

    列表渲染 根据我例子的需要,先来说下,列表渲染使用到的是v-for指令,需要使用 item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名,具体使用方法 ...

随机推荐

  1. VMware 安装 Anolis OS

    安装时参考的以下文章 VMware Workstation Pro 虚拟机安装 VMware Workstation Pro 安装 龙蜥操作系统(Anolis OS) Anolis OS 8 安装指南 ...

  2. redis击穿,穿透,雪崩,分布式锁,api(jedis,luttuce)

    击穿:(redis做缓存用,肯定发生了高并发,到达数据库查询) 设置key 的过期时间,过期后没有这个key,找不到了,就穿过了(其中一个key过期导致并发访问数据库) LRU (LRU,即:最近最少 ...

  3. JS：函数的形参与实参

    形参: 函数显式参数在函数定义时列出. 函数调用未传参时,参数会默认设置为: undefined. function fn(a,b,c){ //a,b,c为形参 //此时有一个隐式操作:var a,v ...

  4. Vue搭建后台系统需要做的几点（持续更新中）

    前言 持续更新 一.UI框架 推荐 Elemnet ui 二.图表 vue-schart npm install vue-schart -S <template> <div id=& ...

  5. 互联网研发效能之去哪儿网(Qunar)核心领域DevOps落地实践

    本文从业务目标角度出发,确定了开源+自建模式搭建 Qunar 研发工具链整体生态:通过 APPCODE 打通工具链,流程规范化自动化:多种手段+发布门禁助力质量提升:建立应用画像确定运维最小单元,可发 ...

  6. 10.5 详解Android Studio项目结构

    Android项目的结构很复杂,并不像HTML项目,最简单的直接一个HTML文件就行了,相信学完上一节的同学就明白,哪怕是一个HelloWorld这样一个项目的文件可能都有几十个,所以我们需要搞清楚, ...

  7. halcon变量窗口的图像变量不显示，重启软件和电脑都没用

    有幸遇到halcon变量窗口的图像变量不显示,重启软件和电脑都没用这个沙雕问题,也是找了蛮久才发现解决办法特意记录一下. 这是正常情况下的窗口(左边)和图像变量不显示的窗口(右边): 解决方法: 鼠标 ...

  8. Gitlab分支策略建议指南

    本文分支策略为总结各中小型企业常见做法(仅代表个人观点),在下才疏学浅,文章如有缺漏或不当之处,望各位帮忙指正.写此文也十分希望能起抛砖引玉之效. 据我所知,目前大部分无论是按瀑布/敏捷开发模型,就算 ...

  9. Pytorch从0开始实现YOLO V3指南 part2——搭建网络结构层

    本节翻译自:https://blog.paperspace.com/how-to-implement-a-yolo-v3-object-detector-from-scratch-in-pytorch ...

  10. gerrit系统如何配置访问控制

    . 版本:v0.3 作者:河东西望 日期:2022-7-13 . 目录 1 关键概念 2 需求场景 3 配置策略 gerrit系统的上手使用有两个难点: 部署repo仓库. 配置访问控制. 想要上手使 ...