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

v-for指令

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

  1. 遍历数组

    <div id="head">
    <!--遍历array1，将值放入arr中-->
    <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渲染出来

    运行截图：

    在这里插入图片描述

    可以看到数组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，

    运行截图：

    在这里插入图片描述

  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。

    截图：

    在这里插入图片描述

  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,注意值在前，键在后，别写反了

    运行截图：

    在这里插入图片描述

  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结束

    运行截图：

    在这里插入图片描述

    修改p元素的代码：

    <p v-for="(number,a) in 10">---数字：{{number}} --------索引：{{a}}</p>

    运行截图：

    在这里插入图片描述

    可以看到迭代数字数字的索引是从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">
    <!--.number的意思是输入框中的值绑定到vue中时会转换成数字，默认是字符串-->
    <label>id:</label><input v-model.number="id">&nbsp;&nbsp;
    <label>name</label><input v-model="name">&nbsp;&nbsp;
    <!--@是v-on:的缩写-->
    <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>

运行截图：

在这里插入图片描述

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

现在来添加0，朱元璋

截图：

在这里插入图片描述

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

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

在这里插入图片描述

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

添加后截图

在这里插入图片描述

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

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

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

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

<div id="head">
    <label>id:</label><input v-model.number="id">&nbsp;&nbsp;
    <label>name</label><input v-model="name">&nbsp;&nbsp;
    <!--@是v-on:的缩写-->
    <button @click="add">添加</button>
    <!--:是v-bind:的缩写-->
    <p v-for="arr in array" :key="arr.id">
        <input type="checkbox">
        <label>{{arr.id}}---{{arr.name}}</label>
    </p>
</div>

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

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

在这里插入图片描述

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时截图

      在这里插入图片描述

    • 为false时截图

      在这里插入图片描述

  2. v-show的使用，v-show的作用和v-if的作用差不多

    修改上面的代码,将v-if改为v-show,再运行可以发现，和上面的一样，页面中会显示格物致知四个字，当把bool修改为false后，页面中啥都没有了

    <p v-show="bool">格物致知</p>

    图就不截了，和上面的图效果一样

  3. 两者的区别

    • v-if是通过删除或添加元素的方式来实现元素消失和显示

      将bool改为false后通过控制台查看p元素

      在这里插入图片描述

      可以看到使用v-show的话，当bool为false的时候，p元素被删除了。

    • v-show是通过css样式的方式来实现元素的显示和消失

      将bool改为false后通过控制台查看p元素

      在这里插入图片描述

      可以看到使用v-show的话，当bool为false的时候，p元素被添加了一个display为none的属性，从而让元素在页面中消失，

    • v-if比v-show更加的耗性能，所以当进行大量的同一元素显示和消失时使用v-show比较好，当需要完全移除一个元素,不让其在代码中显示则可以使用v-if

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue