好家伙，

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. 【Redis】ziplist压缩列表

    压缩列表 压缩列表是列表和哈希表的底层实现之一: 如果一个列表只有少量数据,并且数据类型是整数或者比较短的字符串,redis底层就会使用压缩列表实现. 如果一个哈希表只有少量键值对,并且每个键值对的键 ...

  2. Linux定时任务--Crond使用教程

    Linux定时任务--Crond使用教程 1. 介绍Crond crond是linux下用来周期性的执行某种任务或等待处理某些事件的一个守护进程,与windows下的计划任务类似,当安装完成操作系统后 ...

  3. Hdfs存储策略

    一.磁盘选择策略 1.1.介绍 在HDFS中,所有的数据都是存在各个DataNode上的.而这些DataNode上的数据都是存放于节点机器上的各个目录中的,而一般每个目录我们会对应到1个独立的盘,以便 ...

  4. Oracle Database 19c (19.3)

    https://www.oracle.com/database/technologies/oracle19c-windows-downloads.htmlOracle Database 19c (19 ...

  5. 反向传播神经网络（BP）

    实验部分: ①输入.输出矢量及问题的阐述 由题意输入变量取值范围为e={-2,-1,0,1,2}和ec={-2,-1,0,1,2},则输入矢量有25种情况,分别如下所示: 则由T=int((e+ec) ...

  6. JDBC：处理事务

    1.如何实现事务 如果现在希望对 A 表和 B 表同时删除某一个 id 号的记录,使这两个sql操作组成一个事务.(成功则同时成功,否则都失败) 注意:如果 B 表 建立了引用 A 表的id外键,并指 ...

  7. docker安装Nessus

    Nessus家庭版最大只支持扫描16个主机,但利用docker无限使用,当然虚拟机快照也可以. 关于网上其他的破解版,我是没有成功(显示成功了,其实是自慰版),所以才弄得这个镜像 提供两个镜像(不懂d ...

  8. idea 生成方法注释

    /* * * @description: * @author: xuetong.yang * @date: $date$ $time$ $params$ * @return: $return$ */ ...

  9. Unity3D学习笔记9——加载纹理

    目录 1. 概述 2. 详论 2.1. Resources方式 2.2. API方式 2.3. Web方式 1. 概述 理论上,Unity中加载纹理并没有什么难度,只需要将图片放置在Assets文件夹 ...

  10. Kubernetes v1.24 基于containerd部署

      k8s每个节点安装containerd.   containerd安装参考<containerd安装博文>:https://www.cnblogs.com/punchlinux/p/1 ...