好家伙，

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. 介绍一个好用的dao层与mybatis互跳的idea插件MyBatisCodeHelperPro

    一次点击 File--> Settings --> Plugins -->搜索MyBatisCodeHelperPro,点击获取,重启idea即可 接下来看效果,点击小企鹅就可以相互 ...

  2. 8.shell编程之免交互

    shell编程之免交互 目录 shell编程之免交互 Here Document免交互 免交互定义 Here Document变量设定 多行的注释 expect expect 定义 expect基本命 ...

  3. 前端学习 linux —— shell 编程

    前端学习 linux - shell 编程 shell 原意是"外壳",与 kernel(内核)相对应,比喻内核外的一层,是用户和内核沟通的桥梁.shell 有很多种,国内通常使用 ...

  4. 搭建zabbix及报错处理

    搭建ZABBIX服务器准备工作 1.需要服务器是LAMP 或 LNMP 环境 2.主机名和IP要写在HOST文件里 3.iptables 和 selinux 必须关闭 一.先用最简单的方式搭建lamp ...

  5. MySql字段增删改语句

    新增表字段:alter table 表名 需要添加的字段信息; ALTER TABLE nation add seq VARCHAR(20) COMMENT '顺序' 字段名的修改:alter tab ...

  6. linux下的nginx日志自动备份压缩--日志切割机

    部署完毕nginx之后,发现自己的/var/log/nginx/*log的日志不会压缩,一直都是一个文本写日志, 时间久了,日志文件内存过于增加,将会导致在日志添加过程效率降低,延长时间. 默认安装的 ...

  7. ReentrantLock源码详解

    前言 以前只知道ReentrantLock底层基于AQS实现,相对于(旧版本的)synchronized: 更轻量(基于CAS而不是管程),由JDK实现 可以实现公平/非公平 可中断等待 可绑定多个条 ...

  8. APISpace 让你快速获取笑话大全

    最近公司项目有一个随机展示各类笑话的小需求,想着如果用现成的API就可以大大提高开发效率,在网上的API商店搜索了一番,发现了 APISpace,它里面的 笑话大全API 非常符合我的开发需求.   ...

  9. 优雅哥学 Webpack - 01 - Webpack 5 快速体验

    程序员优雅哥简介:十年程序员,呆过央企外企私企,做过前端后端架构.分享vue.Java等前后端技术和架构 本文摘要:主要讲解 webpack 5 初体验.从webpack 5 初识到便写代码.优雅哥将 ...

  10. AtCoder Beginner Contest 260 F - Find 4-cycle

    题目传送门:F - Find 4-cycle (atcoder.jp) 题意: 给定一个无向图,其包含了S.T两个独立点集(即S.T内部间的任意两点之间不存在边),再给出图中的M条边(S中的点与T中的 ...