好家伙，

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 Workstation 虚拟机详细安装教程

    一.介绍篇 VMware Workstation 16 Pro是VMware(威睿公司)于2021年最新发布的一代虚拟机软件,软件的中文名是"VMware 工作站 16 专业版". ...

  2. 一、shell编程与变量

    目录 命令是什么 命令是如何运行的: 基本语法 解释器 注释 如何执行 输入.输出流 重定向 管道符 | 变量 常见Shell变量的类型包括: 变量命名原则 单引号和双引号 反引号 变量作用范围 查看 ...

  3. 记住这几个git命令就够了

    git clone: 下载初始化git add:添加git commit -m ' ' :提交 带消息git push:推送git pull: 拉取 git config --global user. ...

  4. 这么多房子，哪一间是我的小窝？python采集数据并做数据可视化~

    前言 嗨喽,大家好呀!这里是小熊猫 环境使用: (https://jq.qq.com/?_wv=1027&k=ONMKhFSZ) Python 3.8 Pycharm 模块使用: (https ...

  5. Windows下maven配置环境变量

    右键 "计算机",选择 "属性",之后点击 "高级系统设置",点击"环境变量",来设置环境变量,有以下系统变量需要配置: ...

  6. NC16746 神奇盘子

    NC16746 神奇盘子 题目 题目描述 有一个神奇的盘子,形状为圆形.盘子上面爬着一个大象(视作一个点).由于现实的扭曲,当大象在盘子某个直径的一端的时候,可以瞬间传送至直径的另一端.现在大象想去盘 ...

  7. 如何将 DevSecOps 引入企业？

    前 言 现如今,大部分企业已经在内部实现了 DevOps 实践.DevOps 为团队提供了交付可靠软件和快速更新的方法论.这种方法让团队更专注于质量而不是将时间浪费在运维上.然而,结果是,安全实践往往 ...

  8. 使用 spring-security-oauth2 体验 OAuth 2.0 的四种授权模式

    目录 背景 相关代码 授权码模式 第一步 访问GET /oauth/authorize 第二步 访问POST /oauth/authorize 第三步 访问POST /oauth/token 简化模式 ...

  9. java的elasticsearch做高亮显示

    import org.apache.commons.lang3.reflect.FieldUtils;import org.elasticsearch.action.search.SearchResp ...

  10. 从编译器对指令集的要求看API设计原则

    摘要:最近看<计算机体系结构:量化研究方法(第五版)>,发现指令集设计中的一些原则,对API设计也同样适用,给大家分享一下. 本文中的所有内容来自工作和学习过程中的心得整理,如需转载请注明 ...