好家伙，

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. Win 系统下使用gnvm操作node版本

    下载 gnvm官方网址 有好几种安装方式,我这里使用的是百度网盘下载. 安装 下载完成将gnvm.exe文件放到node的安装根目录下,如果你不知道安装目录在哪?可以使用命令: where node ...

  2. SAP 文本框多行输入

    REPORT zjw_test01. CONSTANTS: gc_text_line_length TYPE i VALUE 72. TYPES: text_table_type(gc_text_li ...

  3. linux函数与数组

    1. 函数的定义 方法1: function_name () { statement } 方法2: function function_name () { statement } --先定义后使用 例 ...

  4. 正在运行中的docker容器设置自动重启

    # demo : 你的容器名称 docker update –-restart=always demo

  5. windows10 程序和功能没有Hyper-V选项

    1.在电脑桌面新建Hyper-V.cmd文件,将如下代码添加到文件中 pushd "%~dp0" dir /b %SystemRoot%\servicing\Packages\*H ...

  6. window下Redis快速启动，以及闪退问题解决

    我下载的是免安装版的window版redis,解压后如下: 第一步:在解压的redis文件夹下新建一个redis-start.bat(window启动一般都是xx.bat) 第二步:打开redis.w ...

  7. ArrayList分析1-循环、扩容、版本

    ArrayList分析1-循环.扩容.版本 转载请注明出处 https://www.cnblogs.com/funnyzpc/p/16407733.html 前段时间抽空看了下ArrayList的源码 ...

  8. windows脚本bat做文件备份

    @ECHO OFF echo 切换到当前目录... cd /d %~dp0% echo 开始复制Code1... echo d | XCOPY Code1 ..\备份\bakdir\Code1 /s ...

  9. CF989C A Mist of Florescence 题解

    因为 \(1 \leq a,b,c,d \leq 100\) 所以每一个颜色都有属于自己的联通块. 考虑 \(a = b=c=d=1\) 的情况. AAAAAAAAAAAAAAAAAAAAAAAAAA ...

  10. 关于cpu体系架构的一些有趣的故事分享

    从排查一次匪夷所思的coredump,引出各种体系架构的差异. 本文中的所有内容来自学习DCC888的学习笔记或者自己理解的整理,如需转载请注明出处.周荣华@燧原科技 1 背景 从全世界有记载的第一台 ...