Vue学习（三）循环遍历与表单绑定

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是属性<