1.Vue:Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。
2.下载Vue 输入指令 ump install vue,下载完毕之后出现文件夹即可
3.vue内容:
new Vue({ //element元素
el:'#itany',
data:{//写数据
table
})
4.循环数组:
div:
<div id="mingzi">
<ul>
<li v-for="a in arr">{{a}}</li>
</ul>
</div>
js:
new Vue({
el:'#mingzi',
data:{
arr:[1,2,3]
}
})
5.循环对象:
div:
<div id="mingzi">
<ul>
<li v-for="a in obj"><<a>></li>
</ul>
</div>
js:
new Vue({
el:'#mingzi',
data:{
obj:{name:"社会王",age:"18岁"}
}
})
6.循环下标:
div:
<div id="mingzi">
<li v-for="(a,index) in arr"><<a>><<index>></li>
</ul>
</div>
js:
new Vue({
el:'#mingzi',
data:{
arr:[1,2,3]
}
})
7.循环表格:
div:
<div id ="itany">
<table>
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>单价</th>
</tr>
</thead>
<table>
<tr v-for="(value,index) in arr">
<td>{{index+1}}</td>
<td>{{value.pname}}</td>
<td>{{value.price}}</td>
</tr>
</table>
</table>
</div>
js:
new Vue({
el:'#itany',
data:{
arr:[
{pname:"葡萄",price:1},
{pname:"香蕉",price:2},
{pname:"苹果",price:3},
]
}
})
网友评论