三,vue中的列表渲染

一,遍历数组

1.1 v-for

例子
假如我们已经拿到了后端的数据要把它渲染到页面中,需要不断重复的渲染

 list:[
                    {name:"张三",age:44},
                    {name:"李四",age:34},
                    {name:"王5",age:84}
                ]

我们要将这些条数据用li标签渲染到页面上,这是就需要重复很多li标签

 <ul >
            <li v-for="i in list">{{i}}</li>
        </ul>

image.png

当然我们不能这样渲染到页面上,我们只想要姓名和年龄,所以要写成这样的格式

  <li v-for="i in list">{{i.name}}{{i.age}}</li>

image.png

当然那么我们需要每一项的前面都有下标怎么办呢?
在i项加个括号,第二个变量就是下标表示方法

<li v-for="(i,index) in list">下标:{{index}}   {{i.name}}{{i.age}}</li>

下标

• 将数组中的位置随机排序
  利用sort()方法和随机数math.random()排序,sort正数从小到大,负数从大到小,所以利用这个机制,让他一会正数一会负数她就乱序排列了,math.random()取值范围是[0,1),

 <button @click="randomFn">随机排序</button>
  randomFn(){
                this.list.sort(()=>Math.random()-.5)
            }

1.2 key值

简单来讲，当你加上了key属性，他会把整个的一个li当成一个整体，而不是仅仅把一块区域进行变化，
注意你要确保每一个：key值是不一样的

如; li

当我们随机的时候会发现后面的input不随着前面的变动而跟着变动

li2
那么这不是我们需求的，我们需要后面的元素跟着前面的名字变化而变化

<li  v-for="i in list" :key="i">  {{i.name}}{{i.age}}<input type="text"></li>

这样整个li就变成整体了,改变name的随机,后面的input也会随之改变

template模板

template是一个标签，不过这个标签不会被渲染到页面中。就是可以将多个元素组合在一起，类似于div，只不过他不显示在页面上，就好比如一个透明的盒子把他们装在一起

如我们做一个开关打开和关闭

<div v-if="flag">
            <h2>打开</h2>
            <p>开关为显示</p>
       </div>

       <div v-else>
        <h2>关闭</h2>
        <p>开关为关闭</p>
       </div>
       <button @click="change">点击打开/关闭</button>

例

这个div标签是渲染在页面上的,但我们开发中不需要外面的div来包裹,实现h2和p标签同时隐藏或关闭怎么办呢
这时就出现了template标签,这个标签不会渲染到页面上

<template v-if="flag">
            <h2>打开</h2>
            <p>开关为显示</p>
       </template>

       <template v-else>
        <h2>关闭</h2>
        <p>开关为关闭</p>
       </template>
       <button @click="change">点击打开/关闭</button>

template