列表渲染指令

最新推荐文章于 2024-07-13 20:10:47 发布

闲人不梦卿

最新推荐文章于 2024-07-13 20:10:47 发布

阅读量546

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/atu1111/article/details/108075485

版权

vue 专栏收录该内容

53 篇文章 3 订阅

订阅专栏

列表渲染指令

当需要将一个数组遍历或枚举一个对象循环显示时，就会用到列表渲染指令 v-for。它的表达式需结合 in 或者 of来使用，类似 item in items 的形式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
            <!-- 遍历数组 -->
            <!-- 当需要将一个数组遍历或枚举一个对象循环显示时，就会用到列表渲染指令 v-for。它的表达 式需结合 in 或者 of来使用，类似 item in items 的形 -->
            <ul>
                <li  v-for="a of arrs">
                    {{a.author}}
                </li>
            </ul>
            <!-- 如果想多个元素渲染，则可以使用template -->
            <ul>
                <template  v-for="a of arrs">
                    <li >
                       作者： {{a.author}}
                    </li>
                    <li >
                       书名：  {{a.book}}
                    </li>
                </template>
              
            </ul>
            <!-- 遍历对象 -->
            <p v-for="p in person">
                {{p}}
            </p>
            <!-- 遍历对象属性  有两个可选的参数-->
            <ul>
                <li v-for="(value,key,index) in person">
                        {{key}}, {{index}}, {{value}}
                </li>
            </ul>
    </div>
    <script src="vue.js">

    </script>
    <script>
          var app = new Vue({
              el:"#app",
              data:{
                  arrs:[{author:'李刚',book:'疯狂java'},{author:'曹雪芹',book:'红楼梦'}],
                  person:{name:'rose',age:20}
              }
          })
    </script>
</body>
</html>

展示效果：
在这里插入图片描述

1.数组更新

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <ul>
            <template v-for="a in arrs">
                <li >
                    作者：{{a.author}}
                </li>
                
                <li >
                   书名：{{a.book}}
                </li>
                <br>
            </template>
           
        </ul>
     
    </div>
    <script src="vue.js">

    </script>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:'11',
                arrs:[{author:'李刚',book:'疯狂java'},{author:'曹雪芹',book:'红楼梦'},{author:'蒲松龄',book:'聊斋志异'}]
            }
        })
        //app.arrs.push({author:'吴承恩',book:'西游记'});
        //app.arrs = app.arrs.filter(function(item){return item.author.match('李刚')}); //新数组转老数组
        // 以下变动的数组中， Vue 是不能检测到的，也不会触发视图更新：
        //app.arrs[1] = {author:'莎士比亚',book:'莎士比亚诗集'}
        // splice(index,len,[item])它也可以用来替换/删除/添加数组内某一个或者几个值
        // index:数组开始下标       len: 替换/删除的长度       item:替换的值，删除操作的话 item为空
        app.arrs.splice(1,2,{author:'莎士比亚',book:'莎士比亚诗集'}); //
    </script>
</body>
</html>

2.过滤和排序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 当你不想改变原数组，想通过一个数组的副本来做过滤或排序的显示时，可以使用计算属性 来返回过滤或排序后的数组， -->
    <div id="app">
        <ul>
            <template v-for="a in filterFunc">
                <li >
                    作者：{{a.author}}
                </li>
                
                <li >
                   书名：{{a.book}}
                </li>
                <br>
            </template>
           
        </ul>
    </div>
    <script src="vue.js">
          
    </script>
    <script>
            var app = new  Vue({
                  el:"#app",
                  data:{books:[{author:'李刚',book:'疯狂java'},{author:'曹雪芹',book:'红楼梦'},{author:'蒲松龄',book:'聊斋志异'}]},
                  computed:{
                      filterFunc:function()
                      {
                          return this.books.filter(
                              function(item)
                              {
                                 return item.author.match('李刚');
                              }
                          );
                        
                      }
                  }
              })
    </script>
</body>
</html>