01 Vue绑定数据 绑定对象 循环数组渲染数据

Vue绑定数据、对象

App.vue组件页面中的相关代码如下图：

模板页面html

<template>
	<!-- vue模板里面，所有的内容要被一个根节点包含起来 -->
	<div id="app">
		<h1>{{msg}}</h1>
		<br>
		这是一个根组件
	</div>
</template>

js绑定数据、对象模块

<script>
	//export default表示将组件暴露出去
	export default {
		name: 'app',
		data() { /*业务逻辑里面定义的数据*/
			return {
				msg: '你好啊，Vue,yuanjianfen！',
				object: {
					name: '张三'
				}
			}
	    }
</script>

浏览器运行效果图：

循环数组渲染数据

实例一

在js代码模块中加上：

list: ['笔影', '七三里', '呼呼'],

在html页面中添加：

<ul>
	<li v-for="item in list">
		{{item}}
	</li>
</ul>

页面效果如下图：

实例二

在js代码模块中加上：

array: [{
		'title': '一切会更好!'
	},
	{
		'title': '我一定会走得更远!'
	},
	{
		'title': '欠我的,一定会还回来的!'
	}
],

在html页面中添加：

<ul>
	<li v-for="item in array">
		{{item.title}}
	</li>
</ul>

页面效果如下图：

实例三

在js代码模块中加上：

news: [{
		"cate": "国际新闻",
		"list": [{
				'title': '国际新闻一'
			},
			{
				'title': '国际新闻二'
			}
		]
	},
	{
		"cate": "国内新闻",
		"list": [{
				'title': '国内新闻一'
			},
			{
				'title': '国内新闻二'
			}

		]
	},
]

在html页面中添加：

<ul>
	<li v-for="item in news">
		{{item.cate}}
		<ol>
			<li v-for="arr in item.list">
				{{arr.title}}
			</li>
		</ol>
	</li>
</ul>

运行效果图如下：

App.vue完整代码

<template>
	<!-- vue模板里面，所有的内容要被一个根节点包含起来 -->
	<div id="app">
		<h1>{{msg}}</h1>
		<br>
		这是一个根组件
		<h3>{{object.name}}</h3>
		<hr>
		<ul>
			<li v-for="item in list">
				{{item}}
			</li>
		</ul>
		<br>
		<hr>
		<ul>
			<li v-for="item in array">
				{{item.title}}
			</li>
		</ul>
		<br>
		<hr>
		<ul>
			<li v-for="item in news">
				{{item.cate}}
				<ol>
					<li v-for="arr in item.list">
						{{arr.title}}
					</li>
				</ol>
			</li>
		</ul>
	</div>
</template>

<script>
	//export default表示将组件暴露出去
	export default {
		name: 'app',
		data() { /*业务逻辑里面定义的数据*/
			return {
				msg: '你好啊，Vue,yuanjianfen！',
				object: {
					name: '张三'
				},
				list: ['笔影', '七三里', '呼呼'],
				array: [{
						'title': '一切会更好!'
					},
					{
						'title': '我一定会走得更远!'
					},
					{
						'title': '欠我的,一定会还回来的!'
					}
				],
				news: [{
						"cate": "国际新闻",
						"list": [{
								'title': '国际新闻一'
							},
							{
								'title': '国际新闻二'
							}
						]
					},
					{
						"cate": "国内新闻",
						"list": [{
								'title': '国内新闻一'
							},
							{
								'title': '国内新闻二'
							}
						]
					},
				]
			}
		}
	}
</script>