v-for&v-model
Day1
文章目录
前言
此文章根据官方文档及些网络资料编写,仅供个人使用。提示:以下是本篇文章正文内容,下面案例可供参考
一、V-for
介绍:V-for可遍历数据对象
1.遍历数组
格式:<div v-for="(item, index) in items"></div>
简单的遍历数组下面使用了Index索引值遍历
<div id="app">
<!--1.简单遍历-->
<ul>
<li v-for="item in names">{
{item}}</li>
</ul>
<!--2.使用索引值-->
<ul>
<li v-for="(item, index) in names">
{
{index}}.{
{item}}
</li>
</ul>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
names: ['java', 'python', 'c', 'c++']
}
})
</script>
2.遍历对象
格式:<div v-for="(value, key) in object"></div>
<div v-for="(value, name, index) in object"></div>
实现:
<div id="app">
<h2>简单遍历</h2>
<ul>
<li v-for="item in message">{
{item}}</li>
</ul>
<h2>获取value与key的遍历,value是值,key是属性<