預先給予要操作的標籤指令

待辦資料內容用v-for="item in todos"處理

資訊的input用v-mode="newTodo"

新增帶辦資訊的按鈕用@click="addTodo"

在vueJS中新增指令

var app = new Vue({
	el:"#app",
	data:{
		newTodo:'', 
		todos:[], //用陣列呈現帶辦事項有哪些
	},
	methods:{
		addTodo: function(){

		 }
	}
})

data:{
	todos:[
		{
			id:'',
			title:'妳好',  //代辦新增的內容
			completed:false  //判斷是否新增
		}
	]
}

點擊按鈕，新增輸入帶辦事項

<button type="button" @click="addTodo">新增</button>

先前已經綁定新增按鈕@click=" addTodo"

在methods新增變數暫時儲存newTodo內容

再用this選取綁定的todos，push新增

在最後加上this.newTodo=''，讓每次執行完input對話框會清空

methods:{ //click事件觸發時執行
  addTodo:function(){
    var value = this.newTodo;//宣告一個變數，暫時儲存內容
    var timestamp = Math.floor(Date.now()); //取得現在時間並轉為正整數
    console.log(value,timestamp);
    this.todos.push({ //點擊後新增到todo陣列
      id: timestamp,
      title:value,
      computed:false
    })
    this.newTodo = ''; //新增後清空資訊內容
  }
}

用修飾符設定，在對話框按Enter執行addTodo

<input type="text" placeholder="準備要做的任務" v-model="newTodo" @keyup.enter="addTodo">

解決沒有資料時新增還是會有資料新增問題

在addTodo中加入if，判定沒有資料時回傳