Vue的v-for循环、v-if、v-show指令

最新推荐文章于 2024-06-25 08:38:12 发布

学习没有捷径，如果有那便是持之以恒

最新推荐文章于 2024-06-25 08:38:12 发布

阅读量2.1k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/wulianlang6162/article/details/98779013

版权

vue 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

循环普通数组

  <li v-for="item in mytitle">{{item}}</li>
        <!--当拿到数组的下标的时候可以这样-->
        <li v-for="(item,i) in mytitle">索引值是：{{i}}-----对应的值是 {{item}}</li>
----------------------------------------------------------------------------------------------
<script>
    new Vue(
        {
            el: '#app',
            data: {
                mytitle:['1','2','3']
            },
            methods:{//这个mehtods属性就是定义了当前vue实例所有可以用的方法
                show:function() {
                    alert("methods中的方法")
                }
            }
        }
    )

</script>

循环对象数组

    <!--循环对象数组-->
        <li v-for="(item,i) in myList">索引值是：{{i}}-----对应的id是 {{item.id}}---对应的name是 {{item.name}}</li><br>
-----------------------------------------------
   myList:[
                    {id :1 ,name : 'zhangshang'},
                    {id :2 ,name : 'zhangshang2'},
                    {id :3 ,name : 'zhangshang3'},
                    {id :4 ,name : 'zhangshang4'}


                ],

循环对象

 <!--循环遍历user对象,值在前面，键到后面，第三位是索引-->
        <li v-for="(val,key,i) in user">对应的值是 {{val}}---对应的key是 {{key}}----索引是{{i}}</li><br>
--------------------------------------------------------------------------
 user:{
                    id:1,
                    name:'托尼',
                    age:12
                }

循环数字

 <!--如果v-fof迭代数字的话，前面的count值从1开始-->
        <li v-for="item in 5">{{item}}</li>

注意 v-for循环的时候要有key值保持数据的唯一性

例如：

   <!--循环对象数组-->
     <!--v-for 循环的时候，key属性只能用number和string，必须用v-bind来属性绑定的形式-->
        <!--在组件中，使用v-for循环的时候，或者在一些特殊的情况下，如果-v-for有问题 必须指定key的唯一值-->
        <li v-for="(item,i) in myList" :key="item.id">索引值是：{{i}}-----对应的id是 {{item.id}}---对应的name是 {{item.name}}</li><br>

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for循环普通数据</title>
    <!--//导入js包-->
    <script src="js/vue.js"></script>
    <div id="app">
        <!--in后面可以放普通数组，对象数据，对象，还可以数字-->
        <li v-for="item in mytitle" >{{item}}</li><br>
        <!--当拿到数组的下标的时候可以这样-->
        <li v-for="(item,i) in mytitle">索引值是：{{i}}-----对应的值是 {{item}}</li><br>
        <!--循环对象数组-->
        <li v-for="(item,i) in myList" :key="item.id">索引值是：{{i}}-----对应的id是 {{item.id}}---对应的name是 {{item.name}}</li><br>

        <!--循环遍历user对象,值在前面，键到后面，第三位是索引-->
        <li v-for="(val,key,i) in user" >对应的值是 {{val}}---对应的key是 {{key}}----索引是{{i}}</li><br>

        <!--如果v-fof迭代数字的话，前面的count值从1开始-->
        <li v-for="item in 5">{{item}}</li>

    </div>
</head>
<body>
<script>
    new Vue(
        {
            el: '#app',
            data: {
                mytitle:['1','2','3'],
                myList:[
                    {id :1 ,name : 'zhangshang'},
                    {id :2 ,name : 'zhangshang2'},
                    {id :3 ,name : 'zhangshang3'},
                    {id :4 ,name : 'zhangshang4'}


                ],
                user:{
                    id:1,
                    name:'托尼',
                    age:12
                }
            },
            methods:{//这个mehtods属性就是定义了当前vue实例所有可以用的方法
                show:function() {
                    alert("methods中的方法")
                }
            }
        }
    )

</script>
</body>
</html>

v-if、v-show指令

特点：

<!--v-if的特点：每次都会重新删除或者创建元素-->
<!--v-show的特点：每次都不会重新进行DOM的删除和创建操作，只是切换了元素的display：none样式-->

<!--使用场景-->
<!--v-if 有较高的切换性能消耗，如果元素涉及到频繁的切换，最好不用v-if，用v-show-->
<!--v-show 有较高的初始渲染消耗，如果元素可能永远不会被显示出来被用户看到，则推荐用v-if-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--//导入js包-->
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">

    <input type="button" value="按钮" @click="flag=!flag">
    <!--v-if的特点：每次都会重新删除或者创建元素-->
    <!--v-show的特点：每次都不会重新进行DOM的删除和创建操作，只是切换了元素的display：none样式-->

    <!--使用场景-->
    <!--v-if 有较高的切换性能消耗，如果元素涉及到频繁的切换，最好不用v-if，用v-show-->
    <!--v-show 有较高的初始渲染消耗，如果元素可能永远不会被显示出来被用户看到，则推荐用v-if-->
    <h1 v-if="flag">这是v-if控制的元素</h1>
    <h1 v-show="flag">这是v-show控制的元素</h1>
</div>
<script>
    new Vue(
        {
            el: '#app',
            data: {
                mytitle:'这是一个自己定义的title',
                flag:true
            }

        }
    )

</script>
</body>
</html>

学习没有捷径，如果有那便是持之以恒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue的v-for循环、v-if、v-show指令

循环普通数组 <li v-for="item in mytitle">{{item}}</li>  <li v-for="(item,i) in mytitle">索引值是：{{i}}-----对应的值是 {{item}}</li>-------------...
复制链接

扫一扫