Vue-07循环渲染指令

最新推荐文章于 2023-03-08 16:12:25 发布

时光倒流745

最新推荐文章于 2023-03-08 16:12:25 发布

阅读量1.1k

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_59141649/article/details/123553940

版权

v-for是vue的循环渲染指令，一般是将多行数据渲染到页面上

用法如下：

当ｄａｔａ数据如下

data:{
    list:[
        {id:1,name:'张三'},
        {id:2,name: '李四'},
        {id:3,name:'王五'}
    ]
}

<tr v-for="item in list" :key="item.id">
    <td>{{item.id}}</td>
    <td>{{item.name}}</td>
</tr>

当然也可以添加ｉｎｄｅｘ属性

<tr v-for="(item,index) in list" :key="item.id">
   <td>{{index}}</td>
    <td>{{item.id}}</td>
    <td>{{item.name}}</td>
</tr>

ｖ－ｆｏｒ属性一般都会搭配ｋｅｙ属性值作用和数据库有点类型，就是让ｋｅｙ的值成为当前的主键，一般会把ｋｅｙ属性值设置为ｉｄ的值

全部代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="./lib/bootstrap.css">
</head>
<body>
<!--//希望Vue能够控制下面这个div,帮我们在把数据填充到div内部-->
<div id="app">
    <table class="table table-bordered table-hover table-striped">
        <thead>
        <th>索引</th>
        <th>id</th>
        <th>姓名</th>
        </thead>
        <tbody>
        <tr v-for="(item,index) in list" :key="item.id">
           <td>{{index}}</td>
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
        </tr>
        </tbody>
    </table>
</div>
<!-- 1.导入vue的库文件，在全局就有vue这个构造函数-->
<script src="./lib/vue-2.6.12.js"></script>
<!--2.创建vue实例对象-->
<script>
    //创建vue实例对象
    const vm = new Vue({
        //el属性是固定写法，表示当前vue控制的区域，接收的值是一个选择器
        el: '#app',
        //data对象就是要渲染到页面上的数据
        data:{
            list:[
                {id:1,name:'张三'},
                {id:2,name: '李四'},
                {id:3,name:'王五'}
            ]
        }
    })
</script>
</body>
</html>

时光倒流745

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-07循环渲染指令

v-for是vue的循环渲染指令，一般是将多行数据渲染到页面上用法如下：当ｄａｔａ数据如下data:{ list:[ {id:1,name:'张三'}, {id:2,name: '李四'}, {id:3,name:'王五'} ]}<tr v-for="item in list" :key="item.id"> <td>{{item.id}}</td> <td>
复制链接

扫一扫