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

秒速五厘米 2024-02-18 23:18 82阅读 0赞

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

![70][]

![70 1][]

显示:

![70 2][]

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

（1）模板文件

（2）JS文件

（3）CSS文件

编写代码：

（1）JS文件

（2）模板文件

<template>
    	
    	<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>

运行项目:

![70 3][]

***IE: http://localhost:8080***

![70 4][]

[70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/c4861c8c004f4be686adca40942e5e19.png
[70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/261e0b632c5d47868ff8bedbf1f5be79.png
[70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/2e5ebff9f6b4402db5693509d2ee0b6d.png
[70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/373d8f778c2a4b6bb98b8380a36af6e7.png
[70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/8dba5e3c3c024a87b8d6e3308d6a331f.png