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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_42540989/article/details/98496571

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数据的重新渲染

08-19

今天用vue写个分页处理的例子,因为vue数据渲染的问题,搞得我头疼死了,哪位大神可以帮我一下[img=https://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/001/face/83.gif][/img][img=https://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/001/face/83.gif][/img]rnrn这是我写的部分代码,一会说完问题,在下面附上全部rn[img=https://img-bbs.csdn.net/upload/201808/19/1534667635_310625.png][/img]rnrn我确实每次都能拿到值rn[img=https://img-bbs.csdn.net/upload/201808/19/1534667587_552801.png][/img]rnrn====================rn[color=#FF0000]问题是网上搜也好,官方文档也好,我只能看到他们那些数据的重新渲染、数据的替换都是针对于一个数组里的某一个对象来修改的,而我要做的是将整个数组全部替换掉。rnrn例如rn后台第一次传来的json串是["code":"ARE","name":"United Arab Emirates","code":"ARG","name":"Argentina"],前台把这个json直接给了vue里的data,第二次传来的json串["code":"ASM","name":"American Samoa","code":"ATF","name":"French Southern territories"],将第二次传来的直接给了vue里的data并将覆盖掉第一次的数据,同时渲染视图.......rnrn就这个视图渲染让,我百思不得其解,有哪位大神可以帮我一下..[/color]rnrn============================rn下面是我前端的全部代码rn<%@ page language="java" contentType="text/html; charset=utf-8"rn pageEncoding="utf-8"%>rnrnrnrn rn 世界所有国家列表rn rn rn rn rn rnrnrn 世界所有国家[分页处理]rn 返回目录菜单rn rn 当前第 nowPage 页,共 pageCount 页 / 共 dataCount 条数据,当前显示 nowDataSize 条数据rn rn rn rn 编号rn .........rn 代码rn rn rn rn rn item.codern ........rn item.code2rn rn rn rn rn rn rn rnrn rnrnrnrnrn=========================附上一组从后台传回的数据rn["code":"ARE","name":"United Arab Emirates","continent":"Asia","region":"Middle East","surfaceArea":83600.0,"indepYear":1971,"population":2441000,"lifeExpectancy":74.1,"gPN":37966.0,"gPNOld":36846.0,"localName":"Al-Imarat al-??Arabiya al-Muttahida","governmentForm":"Emirate Federation","hendOfState":"Zayid bin Sultan al-Nahayan","capital":65,"code2":"AE","code":"ARG","name":"Argentina","continent":"South America","region":"South America","surfaceArea":2780400.0,"indepYear":1816,"population":37032000,"lifeExpectancy":75.1,"gPN":340238.0,"gPNOld":323310.0,"localName":"Argentina","governmentForm":"Federal Republic","hendOfState":"Fernando de la R??a","capital":69,"code2":"AR","code":"ARM","name":"Armenia","continent":"Asia","region":"Middle East","surfaceArea":29800.0,"indepYear":1991,"population":3520000,"lifeExpectancy":66.4,"gPN":1813.0,"gPNOld":1627.0,"localName":"Hajastan","governmentForm":"Republic","hendOfState":"Robert Kot??arjan","capital":126,"code2":"AM","code":"ASM","name":"American Samoa","continent":"Oceania","region":"Polynesia","surfaceArea":199.0,"indepYear":0,"population":68000,"lifeExpectancy":75.1,"gPN":334.0,"gPNOld":0.0,"localName":"Amerika Samoa","governmentForm":"US Territory","hendOfState":"George W. Bush","capital":54,"code2":"AS"]rnrn万分感谢[img=https://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/003/onion/3.gif][/img] 论坛

没有更多推荐了,返回首页