下載vue.js的網址爲：https://cn.vuejs.org/v2/guide/installation.html#直接用-lt-script-gt-引入
代碼實現
<!DOCTYPE html>
<html>
<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>vue學習</title>
<!-- 這裏是直接引入 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 這裏是引入本地的 -->
<!--<script src="./vue.js"></script>-->
</head>
<body>
<div id="app">
<!-- {{content}}<br/> -->
<h1>實現待辦事項功能</h1>
<!-- v-model是一個指令，來對input標籤裏的數據進行綁定，
限制在<input>、<select>、<textarea>、components中使用 -->
輸入未完成的事項:<input type="text" v-model="thing">
<button type="submit" @click=add()>確定</button>
<h2>待辦事項</h2>
<ul>
<!-- v-for 用於循環待辦事項數組 其中item代表每條事項，index代表數組索引(0開始) -->
<li v-for='(item,index) in todo'>
<!-- <span>{{item}}:{{index}}</span> -->
<span>{{item}}</span>
<button type="submit" @click=finish(index)>完成</button>
<button type="submit" @click=deleteTodo(index)>刪除</button>
</li>
</ul>
<h2>完成事項</h2>
<ul>
<!-- v-for 用於循環完成事項數組 其中item代表每條事項，index代表數組索引(0開始) -->
<li v-for='(item,index) in finished'>
<span>{{item}}</span>
<button type="submit" @click=changeTodo(index)>未完成</button>
<button type="submit" @click=deleteFinished(index)>刪除</button>
</li>
</ul>
</div>
<script>
new Vue({
el:'#app',
data:{
content:"hello vue",
thing:'', //v-model綁定
todo:[],
finished:[]
},
methods:{
// 將input標籤裏的內容加入到todo(待辦事項數組)
add(){
this.todo.push(this.thing);
this.thing='';
},
// 將待辦事項裏完成的加入到finished(完成事項數組)
finish(index){
// console.log(1);
this.finished.push(this.todo[index]);
// 數組.splice(index,howmany)方法
// index代表此項目位置(即在數組中的索引) howmany代表從此位置開始刪除多少個
this.todo.splice(index,1);
},
// 將完成事項改成待辦事項
changeTodo(index){
this.todo.push(this.finished[index]);
this.finished.splice(index,1);
},
// 對待辦事項刪除
deleteTodo(index){
this.todo.splice(index,1);
},
// 對完成事項刪除
deleteFinished(index){
this.finished.splice(index,1);
}
}
})
</script>
</body>
</html>