Vue---列表渲染

最新推荐文章于 2024-05-22 09:10:38 发布

菜到极致就是渣

最新推荐文章于 2024-05-22 09:10:38 发布

阅读量2.1k

点赞数 1

分类专栏： Web前端技术文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/gaoqiandr/article/details/130636658

版权

Web前端技术专栏收录该内容

27 篇文章 0 订阅

订阅专栏

一、列表渲染的基本使用

使用v-for指令可以将数组，对象数据渲染成列表视图

（1）渲染数组数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
       <!--渲染数组中的数据-->
        <ul>
            <!--i就是每个数组中的数据，list是数组-->
          <li v-for="i in list">{{i}}</li>
       </ul>
    </div>
    <script>
       const v=new Vue({
         data(){
            return{
                list:[3,1,19,6,78,100,2]
            }
         }
       })
       v.$mount('#root')
    </script>
</body>
</html>

（2）渲染对象数据

其中指令中的参数不仅仅可以只有一个。

一个参数时：

i in list i表示的是每个数据中的一个数据

两个参数时：

(i,index) i表示的是每个数据中的一个数据，index是当前遍历的索引值，并且是从0开始（这个是究其来说还是数组）

三个参数时：

(i,k,index) i表示的是每个数据中的一个数据，index是当前遍历的索引值，并且是从0开始;

k表示的是对象中的数据的键（这个是对象）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
       <!--渲染数组中的数据-->
       <p>两个参数</p>
        <ul>
            <!--这里的:key最好一定要，可以理解成为每一个列的唯一标识-->
           <li v-for="(i,index) in list" ::key="index">
             索引值={{index}}---{{i.name}}---{{i.age}}
           </li>   
       </ul>
       <hr>
        <p>三个参数时</p>
        <ul>
            <li v-for="(i,k,index) in person" :key="index">
                索引值={{index}}---键值={{k}}---值={{i}}
            </li>
        </ul>
    </div>
    <script>
       const v=new Vue({
         data(){
            return{
                list:[
                    {
                        name:'小红',
                        age:88
                    },
                    {
                        name:'大明',
                        age:17
                    },
                    {
                        name:'萨姆三',
                        age:36
                    },
                    {
                        name:'刘伟',
                        age:21
                    },
                    {
                        name:'张伟',
                        age:28
                    }
                ],
                person:{
                    name:'王五',
                    age:22,
                    phone:1729827323,
                    sex:'femail'
                }
            }
         }
       })
       v.$mount('#root')
    </script>
</body>
</html>

二、v-for指令的高级用法

push    //向列表尾部添加一个元素
pop     //删除列表尾部的一个元素
shift   //向列表头部插入一个元素
unshift //删除列表头部的一个元素
splice  //对列表进行分割操纵
sort    //列表排序
reverse //反转列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
       <ul>
         <li v-for="i in list" :key="index">{{i}}</li>
       </ul>
       <hr>
       <button @click="add">添加</button>
    </div>
    <script>
       const v=new Vue({
         data(){
            return{
                list:[1,2,3,4,5]
            }
         },
         methods: {
            add(){
                this.list.push(100)
            }
         },
       })
       v.$mount('#root')
    </script>
</body>
</html>

三、列表过滤

需求：在输入框输入关键字，列表渲染对应的关键字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
       <input placeholder="请输入姓名" v-model="k">
       <ul>
           <li v-for="(i,index) in fillist" ::key="index">
            {{i.name}}---{{i.age}}
           </li>
       </ul>
    </div>
    <script>
       const v=new Vue({
         data(){
            return{
                k:'',
                list:[
                    {
                        name:'张三',
                        age:20
                    },
                    {
                        name:'李四',
                        age:1
                    },
                    {
                        name:'王三',
                        age:77
                    },
                    {
                        name:'王五',
                        age:54
                    },
                    {
                        name:'李三',
                        age:77
                    }
                ],
                fillist:[]
            }
         },
         //监听属性来写
        //  computed:{
        //     fillist:{
        //         get(){
        //             //这里的p其实就是每个数据,返回值就是过滤掉剩下的，filter返回的是一个新数组，不改变原数组
        //             return this.list.filter((p)=>{
        //                 return p.name.indexOf(this.k)!==-1
        //             })
        //         }
        //     }
        //  },
         //watch监听来写
         watch:{
            k:{
            immediate:true,
            handler(newValue){
              this.fillist=this.list.filter((p)=>{
                return p.name.indexOf(newValue) !== -1//符合条件的就留下
              })
            }
        }
         }
       })
       v.$mount('#root')
    </script>
</body>
</html>

四、列表排序

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h1>{{name}}</h1>
        <ul>
            <li v-for="(i,index) in list" :key="index">{{i}}</li>
        </ul>
        <button @click="add1">原顺序</button>
        <button @click="add2">年龄升序</button>
        <button @click="add3">年龄降序</button>
    </div>
    <script>
        const x = new Vue({
            data(){
                return{
                 name: 1,
                 chu:[1,19,2,100,23,234,12],
                 arr:[1,19,2,100,23,234,12]
                }
            },
            methods: {
             add1(){
                this.name=1;
             },
             add2(){
                this.name=2
             },
             add3(){
                this.name=3
             }
            },
            computed:{
                list:{
                    get(){
                       if(this.name==1){
                         return this.chu;
                       }
                       else if(this.name==2){
                        const gai=this.arr.sort((p1,p2)=>{
                               return p1-p2;
                         })
                         return gai
                       }
                       else{
                        const gai=this.arr.sort((p1,p2)=>{
                            return p2-p1
                        })
                        return gai
                       }
                    }
                }
            }
        })
        x.$mount('#root')
    </script>
</body>

</html>