vue-exercise-06-v-for.htm

<html>

<head>
  <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>

</head>

<body>

  <div id="app">
    <p>
      1。v-for直接绑定数据，绑定一个对象数组。只使用第一个参数，取其中的值
    </p>
    <ul>
      <li v-for="user in users">name:{{user.name}},age:{{user.age}}</li>
    </ul>
    <hr>
    <p>
      2。v-for直接绑定数据，绑定一个对象数组。使用第一个和第二个参数，取其中的值,
      第一个表示对象，第二个参数是对应的索引
    </p>
    <ul>
      <template v-for="(user,index) in users">
        <li>{{index+1}}:{{user.name}}</li>
      </template>
    </ul>
    <hr>
    <p>3。v-for直接绑定数据，绑定一个对象。使用3个参数，取其中的值,
      第一个表示对象的值，
      第二个参数表示对象的名称，
      第三个表示是对应的索引

      注意
    </p>
    <ul>
      <template v-for="(value,name,index) in school">
        <li>{{index+1}}:{{name}}={{value}}</li>
        1这个input不会双向绑定，因为绑定的是value
        <input type="text" v-model="value" />
        2这个input是双向绑定,因为绑定的是school[name]
        <input type="text" v-model="school[name]" />
      </template>
    </ul>
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js!',
        gender: 'female',
        users: [
          {
            name: 'charlie', age: 30
          },
          {
            name: 'jim', age: 12
          },
          {
            name: 'john', age: 45
          },
        ],
        school: {
          address: "usa",
          fee: "$60,000"
        }
      }
    })
  </script>
</body>

</html>