步驟1: 看到input，就想到雙向繫結，這樣才能改變data資料，繼而對顯示也可以進行操作。所以呢，就會用到v-model這個屬性，定義content用來儲存input輸入的值。

步驟2: 既然有列表羅列，肯定需要一個列表，list用於儲存或者說記憶所有儲存的內容。list是個陣列。

步驟3: 有了input以及list之後，我們需要將input推送到list，我們就需要一個點選事件觸發 [email protected]

步驟4:最後一步，把list羅列到頁面上進行顯示 --v-for

首先：將靜態模板做一下：

<div id="
 
root">
     <input type="" name="" v-model="content">
     <button @click="submit">提交</button>
     <ul>
       <li></li>
     </ul>
</div>

接下來是js部分，定義data：

data() {
      return {
        content: '',
        list: []
      }
}

步驟1和步驟2已經完成，接下來就完成步驟3和步驟4,首先做一下如何將input裡的內容推送到list裡，當然要寫在methods裡：

methods: {
      submit () {
        this.list.push(this.content)  //用push推到列表棧裡
      }
}

最後一步，將列表展示在頁面上：

<ul>
       <li v-for="(item, index) in list" :key="index">{{ item }}</li>
</ul>

參考原文：https://mp.weixin.qq.com/s/njREZJb1srP4tvc7fLoRNQ