vue-cli2 和vue-cli3

vue-cli2 和vue-cli3

 

https://www.cnblogs.com/zhanvo/p/10963776.html

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div>
        <input type="button" value="add person" @click="add" />
        <div>
          <span>平均年龄:{{ average }}</span>
        </div>
        <div
          v-for="item of users"
          :key="name"
          style="margin-top: 10px; border-bottom: 1px solid"
        >
          <div><span>姓名</span> <input type="text" v-model="item.name" /></div>
          <div><span>年龄</span> <input type="text" v-model="item.age" /></div>
        </div>
      </div>
    </div>
  </body>
  <script>
    var app = new Vue({
      el: '#app',
      data() {
        return {
          users: [{ name: 'robin', age: 18 }, { name: 'terry', age: 30 }]
        }
      },
      methods: {
        add: function() {
          this.users.push({ name: null, age: null })
        }
      },
      computed: {
        average() {
          return parseInt(
            this.users.reduce((total, current) => {
              return total + parseInt(current.age ? current.age : 0)
            }, 0) / this.users.length
          )
        }
      }
    })
  </script>
</html>

　　

posted @ 2019-06-18 13:51  巴黎爱工作  阅读(659)  评论(0)  编辑  收藏  举报