Vue.js框架--绑定数据，对象，数组渲染数据（二）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/hlx20080808/article/details/82082164

HBuilder DEI 导入项目  ->文件|导入

显示:

介绍App.vue根文件有三个文件组合在一起

（1）模板文件

<template>
	<!--	vue模板里面，所有的内容被一个根节点包含起来-->
	<div id="app"> 
    </div>
</template>

 （2）JS文件

<script>
	export default {
		name: 'app',
		data() { //业务逻辑定义的数据
			return {
				msg: 'Welcome to Your Vue.js App'
              }
      }
<script>

（3）CSS文件

<style lang="scss">

</style>

编写代码：

 （1）JS文件

<script>
	export default {
		name: 'app',
		data() { //业务逻辑定义的数据
			return {
				msg: 'Welcome to Your Vue.js App',
				obj:{ //对象对象
					username:'bear',
					gender:'F'
				},
				//数组1
				names:['aaa','bbb','ccc'],
				//数组2
				numbers:[
				 {"name":"mike"},
				 {"name":"your"},
				 {"name":"boy"},
				 {"name":"back"}
				],
				//复杂数组3
				list:[
				  {
				  	"title":"Javascript应用",
				  	arr:[
				  	   {"name":"mike1"},
				       {"name":"your1"}
				  	]
				  },
				   {
				  	"title":"oracle数据库应用",
				  	arr:[
				  	   {"name":"mike2"},
				       {"name":"your2"}
				  	]
				  }
				]
			}
		}
	}
</script>

 （2）模板文件

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

运行项目:

IE: http://localhost:8080