Vue (第5篇教程 v-for 渲染数据 渲染多层数据)

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>

©️2020 CSDN 皮肤主题: 终极编程指南 设计师:CSDN官方博客 返回首页