首页 前端知识 Vue 常用指令 v-for 标签循环展示数据

Vue 常用指令 v-for 标签循环展示数据

2024-05-26 00:05:47 前端知识 前端哥 979 166 我要收藏

v-for指令的作用是将作为模板的那个标签,还有内部的内容,根据循环的次数拷贝若干份。

v-for:根据数据生成列表结构,并且是响应式的,可以十分便捷的操作列表结构了。至于是什么样的列表,就看你指令使用的位置了,列表的生成依赖于数据,所以先去定义数据。

它结合的类型挺多的,数组,对象,迭代器,字符串,最常使用的是数组,里使用数组来演示。

这里多个的是li标签,这里就使用v-for指令去生成多个li。如果li中有内容,那么每个生成的标签就会将内容包含进去。

v-for指令的作用是将作为模板的那个标签,还有内部的内容,根据循环的次数拷贝若干份。item的值是可以使用的。

item的值可以结合其他指令,比如使用v-bind和v-on指令。 

除了数组的每项数据之外,数组的索引页也是比较常用的。

 item和index都是可以修改其名称的。

如果数组的每一项不是数字,而是对象或者其他复杂的类型,那么item代表这个对象,要获取内部的值要结合.语法。如果不使用点语法,那么会将整个对象渲染出来。

v-for还有个特点,比如数组的长度发生变化了,比如添加了或者删除了,那么生成的列表也会发生改变。

可以看到v-for指令是可以结合v-bind指令的:

  <h2  v-for="item in objarr"    v-bind:title="item.name"  >

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://unpkg.com/vue@3"></script>
    <style type="text/css">

    </style>
</head>

<body>    
    <div id="vue">
      <ul type="circle">
        <li  v-for="(item,index) in arr">
            number:{{ item }} index:{{ index+1 }} 
        </li>
        <h2 v-for="item in objarr" v-bind:title="item.name">
           {{ item }}
        </h2>

        <h1 v-for="item in objarr">
            {{ item.name }}
        </h1>
      </ul>
    </div>

    <script type="text/javascript">
        const HelloVueApp = {
            data(){
                return{
                    arr:[1,2,3,4],
                    objarr:[
                        {
                            name: "lucas",
                            id : 1
                         },
                        {
                            name: "jerry",
                            id: 2
                        }
                    ]

                }
            }
        } 
    //挂载到html当中
    Vue.createApp(HelloVueApp).mount('#vue')

    </script>

</body>

</html>

来测试一下数据的变更,添加增加数据的方法。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://unpkg.com/vue@3"></script>
    <style type="text/css">

    </style>
</head>

<body>    
    <div id="vue">
      <button type="button" @click="add()">add</button>
      <button type="button" @click="remove()">remove</button>
      <ul type="circle">
        <li  v-for="(item,index) in arr">
            number:{{ item }} index:{{ index+1 }} 
        </li>
        <h2 v-for="item in objarr" v-bind:title="item.name">
           {{ item }}
        </h2>

        <h1 v-for="item in objarr">
            {{ item.name }}
        </h1>
      </ul>
    </div>

    <script type="text/javascript">
        const HelloVueApp = {
            data(){
                return{
                    arr:[1,2,3,4],
                    objarr:[
                        {
                            name: "lucas",
                            id : 1
                         },
                        {
                            name: "jerry",
                            id: 2
                        }
                    ]

                }
            },
            methods:{
               add:function(){
                this.objarr.push(
                    {name: "lisa",id: 3}
                );
               },
               remove:function(){
                //移除最左边的元素
                this.objarr.shift();
               }
            }
        } 
    //挂载到html当中
    Vue.createApp(HelloVueApp).mount('#vue')

    </script>

</body>

</html>

--------------------------------------------------------------------------------------------------------------------------------

 v-for:就地更新

<!--for循环时,需要指定属性是唯一的key -->

<li v-for="(val,index)in myArray2":key="val.id">

Vue 正在更新使用 v-for 渲染的元素列表时,它默认使用 就地更新 的策略。如果数据项的顺序 被改变, Vue 将不会移动 DOM 元素来匹配数据项的顺序,而是就地更新每个 元素,并且确保它们在每个索引位置正确渲染。 为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一的 key 属性 :
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://unpkg.com/vue@3"></script>
    <style type="text/css">

    </style>
</head>

<body>    
    <div id="vue">
         <ul>
            <li v-for="(item,index) in userinfo">
                {{item.id}}
               <input type="text" :value="item.name" :key="item.id">
               <button type="button" @click="remove(index)">删除</button>
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        const HelloVueApp = {
            data(){
                return{
                   userinfo:[{id:1,name:"lucas",age:20},{id:2,name:"guanchunyan",age:18},{id:3,name:"jerry",age:30}],
                }
            },
            methods:{
               remove:function(index){
                  this.userinfo.splice(index,1)
               }
            }
        } 
    //挂载到html当中
    Vue.createApp(HelloVueApp).mount('#vue')

    </script>

</body>

</html>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9545.html
标签
评论
发布的文章

html5怎么实现语音搜索

2024-06-01 10:06:32

HTML5

2024-02-27 11:02:15

HTML - 头部元素

2024-06-01 10:06:06

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!