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="(ite...

一只程序猿小白

3674人浏览 · 2019-08-15 18:21:32

一只程序猿小白 · 2019-08-15 18:21:32 发布

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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^