vue的简单使用3-v-for、v-if、v-show等指令的使用

爱被打了一巴掌 2022-02-05 10:05 702阅读 0赞

### Vue中v-for、v-if、vshow等指令的使用 ###

#### v-for指令 ####

v-for指令使用来迭代遍历的，可以遍历数组、对象数组、对象和数字

1.  遍历数组
    
        <div id="head">
            
            <p v-for="arr in array1">{
             {arr}}</p>
        </div>
        <script> let vue1 = new Vue({ el: "#head", data: { array1: ['a', 'b', 'c', 1, 2, 3] } }); </script>
    
    首先在data中定义了一个数组array1，然后在p元素中使用v-for来遍历数组， 类似于for-each循环，这样array1中的每一项的值都会存入到arr中，然后使用插值表达式\{ \{\}\}将arr渲染出来
    
    运行截图：
    
    ![在这里插入图片描述][20190505154317862.png]
    
    可以看到数组array1的值在网页中渲染出来了
    
    修改上面的代码（p元素的代码）
    
        <div id="head">
            <p v-for="(value, index) in array1">--值是{
             {value}} ----索引是{
             {index}}</p>
        </div>
        <script> let vue1 = new Vue({ el: "#head", data: { array1: ['a', 'b', 'c', 1, 2, 3] } }); </script>
    
    可以看到v-for改成了v-for="(value, index) in array1"， 其中括号中的value（第一个）代表遍历的值，index（第二个）代表索引（下标，从0开始），然后在插值表达式中就可以获取出来值和索引，当然里面的单词可以自己写，不一定要写成value和index，
    
    运行截图：
    
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM3MzIzOQ_size_16_color_FFFFFF_t_70]
2.  遍历数组对象
    
    修改上面的代码：
    
        <div id="head">
            <p v-for="arr in array2">---id是{
             {arr.id}} -----姓名是{
             {arr.name}}</p>
        </div>
        <script> let vue1 = new Vue({ el: "#head", data: { array2: [ { id: 1, name: '嬴政'}, { id: 2, name: '刘彻'}, { id: 3, name: '杨广'} ] } }); </script>
    
    在data中定义了一个对象数组array2,数组中有三个对象，然后在p元素中使用v-for指令遍历array2，通过arr.id的方式获取id,同理获取name。
    
    截图：
    
    ![在这里插入图片描述][20190505154401432.png]
3.  遍历对象
    
    继续修改上面的代码
    
        <div id="head">
            <p v-for="(value, key) in obj1">-----值是{
             {value}} --------键是{
             {key}} </p>
        </div>
        <script> let vue1 = new Vue({ el: "#head", data: { obj1: { id: 4, name: '朱元璋', sex: '男' } } }); </script>
    
    在data中定义一个对象obj1，里面有三个属性（键值对），然后在p元素使用v-for指令遍历obj1，括号中的value（第一个）代表值，例如朱元璋，key（代表键）,例如name,**注意值在前，键在后，别写反了**
    
    运行截图：
    
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM3MzIzOQ_size_16_color_FFFFFF_t_70 1]
4.  迭代数字
    
    使用v-for指令还可以迭代数字，迭代的数字会从1开始（不是从0）
    
    修改代码
    
        <div id="head">
            <p v-for="number in 10">{
             {number}}</p>
        </div>
        <script> let vue1 = new Vue({ el: "#head" }); </script>
    
    在vue中没有定义data属性，在p元素中使用了v-for=“number in 10”，意思是迭代（遍历）10,从1开始直到10结束
    
    运行截图：
    
    ![在这里插入图片描述][20190505154435697.png]
    
    修改p元素的代码：
    
        <p v-for="(number,a) in 10">---数字：{
             {number}} --------索引：{
             {a}}</p>
    
    运行截图：
    
    ![在这里插入图片描述][20190505154454177.png]
    
    可以看到迭代数字数字的索引是从0开始的，别搞混了。

#### key的使用 ####

在使用v-for的时候，会有个小问题，先写代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="libs/vue.js"></script>
    </head>
    <body>
    <div id="head">
        
        <label>id:</label><input v-model.number="id">  
        <label>name</label><input v-model="name">  
        
        <button @click="add">添加</button>
        <p v-for="arr in array">
            <input type="checkbox">
            <label>{
       {arr.id}}---{
       {arr.name}}</label>
        </p>
    </div>
    <script> let vue1 = new Vue({ el: "#head", data: { id: null, name: null, array: [ { id: 1, name: '嬴政'}, { id: 2, name: '刘彻'}, { id: 3, name: '杨广'} ] }, methods: { add: function () { //添加对象到数组array的头部 this.array.unshift({ id: this.id, name: this.name}) } } }); </script>
    </body>
    </html>

运行截图：

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

在data定义了一个id和一个name,分别用来获取输入框中的值，使用了v-model进行了双向绑定（不知道v-model的可以看前一篇文章），然后定义了一个添加按钮，当按钮按钮时会执行methods中的add函数，将对象添加到array的头部

现在来添加0，朱元璋

截图：

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

可以发现，数据成功添加进去了，接下来我们勾选2号刘彻再进行添加

添加前截图（勾选2号刘彻）

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

接下来添加数据0，朱元璋

添加后截图

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

可以发现刚刚明明勾选的是2号刘彻，添加完数据后竟然勾选的是1号嬴政

官方的解释是：当 Vue.js 用 `v-for` 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。这个默认的模式是高效的，但是**只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出**。

简单的理解（当成数组理解）就是没使用key的话，你勾选的索引为1（第二个）的元素，当添加元素后，勾选的依然是索引为1（第二个）的元素，所以当添加0，朱元璋后，勾选的是1，嬴政，而不是2，刘彻。

那怎样解决这个问题呢，使用key的话可以完美的解决这个问题，给每个元素添加一个key，这个key只能是数字或者字符串，而且是唯一的，而我们的id正好是唯一的，所以修改div中的代码

为p元素添加一个:key属性，将key进行单项绑定，key中的arr.id是唯一的，这样就可以为p元素指定一个唯一的key了，这时候再勾选一个元素，vue就是根据key来勾选，当元素索引值发生改变时，勾选的元素不会发生改变

勾选2号刘彻后运行 截图：

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

#### v-if和v-show的使用与区别 ####

在第一篇中简单的介绍了一下v-if，这次再来介绍一下，并且与v-show进行对比

1.  v-if的使用
    
    v-if的作用可以使一个元素显示或者消失
    
        <div id="head">
            <p v-if="bool">格物致知</p>
        </div>
        <script> let vue1 = new Vue({ el: '#head', data: { bool: true } }); </script>
    
    运行后，页面中会显示格物致知四个字，当把bool修改为false后，页面中啥都没有了
    
     *  为true时截图
        
        ![在这里插入图片描述][20190505154723552.png]
     *  为false时截图
        
        ![在这里插入图片描述][20190505154732542.png]
2.  v-show的使用，v-show的作用和v-if的作用差不多
    
    修改上面的代码,将v-if改为v-show,再运行可以发现，和上面的一样，页面中会显示格物致知四个字，当把bool修改为false后，页面中啥都没有了
    
        <p v-show="bool">格物致知</p>
    
    图就不截了，和上面的图效果一样
3.  两者的区别
    
     *  v-if是通过删除或添加元素的方式来实现元素消失和显示
        
        将bool改为false后通过控制台查看p元素
        
        ![在这里插入图片描述][20190505154209561.png]
        
        可以看到使用v-show的话，当bool为false的时候，p元素被删除了。
     *  v-show是通过css样式的方式来实现元素的显示和消失
        
        将bool改为false后通过控制台查看p元素
        
        ![在这里插入图片描述][20190505154219700.png]
        
        可以看到使用v-show的话，当bool为false的时候，p元素被添加了一个display为none的属性，从而让元素在页面中消失，
     *  v-if比v-show更加的耗性能，所以当进行大量的同一元素显示和消失时使用v-show比较好，当需要完全移除一个元素,不让其在代码中显示则可以使用v-if

[20190505154317862.png]: /images/20220205/389324a8a13a464791cd38b3e3b184d5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM3MzIzOQ_size_16_color_FFFFFF_t_70]: /images/20220205/9da11205167d40278b123e9b99c784fa.png
[20190505154401432.png]: /images/20220205/ce3981fd307e43938e8f4861840e14cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM3MzIzOQ_size_16_color_FFFFFF_t_70 1]: /images/20220205/cdbd63d392234293aa9c5a2bf780412b.png
[20190505154435697.png]: /images/20220205/919f1f097c2041258f511f76456279b9.png
[20190505154454177.png]: /images/20220205/d1b096e514c242e7a192a739b189fc39.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM3MzIzOQ_size_16_color_FFFFFF_t_70 2]: /images/20220205/1f8aa1dffcf64bf28392741824c9457f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM3MzIzOQ_size_16_color_FFFFFF_t_70 3]: /images/20220205/0ae38a23b83c4a8f8a69299fdb06345a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM3MzIzOQ_size_16_color_FFFFFF_t_70 4]: /images/20220205/a05e4fb8ca4c4330aedad35ff3cff836.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM3MzIzOQ_size_16_color_FFFFFF_t_70 5]: /images/20220205/820613e53a1b4554a79b02fab661b7f5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM3MzIzOQ_size_16_color_FFFFFF_t_70 6]: /images/20220205/e6885fe1d54a4dff9749e68eddd41dcc.png
[20190505154723552.png]: /images/20220205/560a0802076a49d6a094a45d7ba75f97.png
[20190505154732542.png]: /images/20220205/793d5f8c72814b36a2054a7e604af2a5.png
[20190505154209561.png]: /images/20220205/d8c0757c91f74ef69cc9777f901911f2.png
[20190505154219700.png]: /images/20220205/06e59bfa0b2f4b3e91d3b96c12a0f207.png