v-for 渲染数据渲染多层数据

最新推荐文章于 2024-09-28 15:43:20 发布

kookoo_babe

最新推荐文章于 2024-09-28 15:43:20 发布

阅读量695

点赞数 1

分类专栏： vue 文章标签： vue

原文链接：https://blog.csdn.net/qq_42540989/article/details/98496571

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1、渲染数据

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>v-for</title>
</head>
<body>
	<div id="app">
		<p v-for="(item,index) in list">{{index}}---{{msg}}---name:{{item.name}}--- age:{{item.age}}---sex:{{item.sex}} </p>
	</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	var vm = new Vue({
		el:'#app',
		data:{
		  msg:'vue允许访问所有父级作用域的属性',
		  list:[
		     {
		     	name:'hello,web前端工程师',
				age:'18',
				sex:'男'
			},
			 {
		     	name:'hello,Java工程师',
				age:'20',
				sex:'女'
		     }
		  ]
			
		}
	})
</script>
</html>

Vue 允许直接遍历一个对象，也允许数组中存放多个对象，通过访问其属性来进行遍历。
在这里插入图片描述

2、渲染多层数据

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>v-for  渲染多层数据</title>
</head>
<body>
  <div id="app">
    <div v-for="item1 in list">
        {{item1.name}}
        <input v-for="item in item1.items" v-model="item.value" />
    </div>
    <div v-for="item in items">
        <input v-model="item.value" />
    </div>
    <div v-for="item in list | get_items">
        <input v-model="item.value" />
    </div>
    {{list | json}}
</div>
</body>
  <script src="http://cdn.bootcss.com/vue/1.0.17/vue.min.js"></script>
    <script>
       'use strict';
      //  1.消除版本javascript中一些不合理及不严谨之处，减少怪异行为
      // 2.提高编译效率，提高运行速度
      // 3.为新版本的javasript做铺垫兼容
        new Vue({
            el: '#app',
            data: {
                list: [
                    {
                        name: 'hello',
                        items: [
                            {
                                value: 'web前端开发工程师'
                            }
                        ]
                    },
                    {
                        name: 'hi',
                        items: [
                             {
                                 value: 'Java开发工程师'
                             }
                        ]
                    }
                ]
            },
            computed: {
                items() {
                    return this.$eval('list | get_items')
                }
            },
            filters: {
                get_items: function (list) {
                    var arr = []
                    list.forEach(c => c.items.forEach(t => arr.push(t)))
                    return arr
                }
            },
        })
    </script>
</html>