<template>

  <div>

    <div class="moive">

      <ul class="list">

        <li v-for="item in fullMovies">{{ item }}</li>

      </ul>

      <button v-on:click="addMovie">add movie</button>

    </div>

  </div>

</template>

<script>

    export default {

        name: 'test2',

        data() {

            return {

              movies: [{

                name: '捉妖记2',

                year: 2018

              },

              {

                name: '红海行动',

                year: 2017

              },

              {

                name: '速度与激情',

                year: 2017

              }

            ]

          }

        },

        computed: {

          fullMovies: {

            get: function() {

              var arr = [];

              for (var i = 0; i < this.movies.length; i ++) {

                arr.push(this.movies[i].name + '(' + this.movies[i].year + ')'); // 速度与激情(2017)

              }

              return arr;

            }

          }

        },

        methods: {

          addMovie: function() {

            this.movies.push({

              name: '妖猫传3',

              year: 2019

            })

          }

        },

        watch: {

          movies: function(newValue) {

            alert('我添加了' + newValue[newValue.length - 1].name);

          }

        }

      }

</script>

<style scoped>

</style>