Vue学习之v-if和v-for指令

分手后的思念是犯贱 2021-12-01 15:40 306阅读 0赞

# v-if和v-show #

v-if和v-show的作用有点类似，我们一起来看下，案例代码如下:

效果如下:

![在这里插入图片描述][20190710180101935.gif]

通过演示效果我们能看到v-if和v-show都能控制标签元素的现实和隐藏，但相互之间又有区别

指令     | 说明                                                                                    
     ------ | -------------------------------------------------------------------------------------- 
     v-if   | 每次都会重新删除或创建元素，有较高的切换性能消耗如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show                       
     v-show | 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式有较高的初始渲染消耗如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if

# v-for的使用 #

## 1.普通数组 ##

针对数据为数组的类型，循环的使用。

### 简单插值的使用 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70]

### 循环使用 ###

简单的使用循环

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 2]

获取循环下标

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 3]

![在这里插入图片描述][20190710183259398.png]

## 2.对象数组 ##

集合中的元素是对象

![在这里插入图片描述][20190710183444483.png]

数组中的元素是自定义的对象的时候直接通过"."存取器来获取元素。

## 3.循环对象 ##

注意：在遍历对象身上的键值对的时候， 除了有val，key ,在第三个位置还有 一个 索引 。

![在这里插入图片描述][20190710185340871.png]

## 4.迭代数字 ##

![在这里插入图片描述][2019071018545744.png]

## 5.循环中key属性的使用 ##

注意:2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。  
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “**就地复用**” 策略。如果数据项的顺序被改变，Vue将**不是移动 DOM 元素来匹配数据项的顺序**， 而是**简单复用此处每个元素**，并且确保它在特定索引下显示已被渲染过的每个元素。为了给 Vue 一个提示，**以便它能跟踪每个节点的身份，从而重用和重新排序现有元素**，你需要为每项提供一个唯一 key 属性。

### 有问题的情况 ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <script src="./lib/vue-2.4.0.js"></script>
    </head>
    
    <body>
      <div id="app">
    
        <div>
          <label>Id:
            <input type="text" v-model="id">
          </label>
    
          <label>Name:
            <input type="text" v-model="name">
          </label>
    
          <input type="button" value="添加" @click="add">
        </div>
    
        
        
        
        <p v-for="item in list" >
          <input type="checkbox">{
       {item.id}} --- {
       {item.name}}
        </p>
      </div>
    
      <script>
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            id: '',
            name: '',
            list: [
              { id: 1, name: '张三1' },
              { id: 2, name: '张三2' },
              { id: 3, name: '张三3' },
              { id: 4, name: '张三4' },
              { id: 5, name: '张三5' }
            ]
          },
          methods: {
            add() { // 添加方法
              this.list.unshift({ id: this.id, name: this.name })
            }
          }
        });
      </script>
    </body>
    
    </html>

效果

![在这里插入图片描述][20190710190027356.gif]

我们发现原来我们勾选的是id为4的选项，但是当我们插入新的一行的时候，被选中的就变为3了，这就有问题的，这时我们需要使用key来给每天数据绑定一个特定的key

### key的使用 ###

![在这里插入图片描述][20190710190232416.png]

直接给key绑定循环变量访问有问题:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 4]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 5]

![在这里插入图片描述][20190710190522135.gif]

这时我们发现前面的问题解决了~

*  注意： v-for 循环的时候，key 属性只能使用 number获取string
 *  注意： key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值
 *  在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须 在使用 v-for 的同时，指定 唯一的 字符串/数字 类型 :key 值

[20190710180101935.gif]: /images/20211201/b4ba537c2b0e4db1b12f32a8fd73a7e1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70]: /images/20211201/78dd54f3cfc94e5baaf588d5bf2299b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 1]: /images/20211201/a0c260cb783d48eabcc55af35a017ae6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 2]: /images/20211201/b5e4bf987f9c43efb6fb0fcc60ce5e15.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 3]: /images/20211201/a2916a1e27064402a60ebac469c2bed6.png
[20190710183259398.png]: /images/20211201/09db4ddea8494f08815b45c7b2fb4cc4.png
[20190710183444483.png]: /images/20211201/b8103aabfece4f27abdf6a86ce9df237.png
[20190710185340871.png]: /images/20211201/8f00793421e34ebe9f7d96df030b9d04.png
[2019071018545744.png]: /images/20211201/a5f8e50b3f9342dda7c508af300585c4.png
[20190710190027356.gif]: /images/20211201/8aec4730d25b4005a0b5eb8e56699e6c.png
[20190710190232416.png]: /images/20211201/344e5b8c753a468aacec549629e334a4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 4]: /images/20211201/2773d80d48d4492286318e38bb6ee62f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 5]: /images/20211201/2c6af1f12c2c47fbb91fe639070883f4.png
[20190710190522135.gif]: /images/20211201/686c64f4011a44b29218d23adfa74644.png