Vue學習(5)————————ToDoList條件渲染（v-if）（簡單快取）（方法封裝）
阿新 • • 發佈：2018-11-24
個人理解簡寫
<template> <div id="app"> <input type="text" v-model="textmode"><br /> <button v-on:click="setListA()">提交未辦理資訊</button> <hr /> <h1>未辦理的事情</h1> <table border="" cellspacing="" cellpadding="" class="tableone"> <tr v-for="(item,key) in lista"> <td>{{item}}</td> <td>{{key}}</td> <td><button v-on:click="setOver(key)">完成</button></td> </tr> </table> <hr /> <h2>已完成事項</h2> <table border="" cellspacing="" cellpadding="" class="tableone"> <tr v-for="(item,key) in listb"> <td>{{item}}</td> <td>{{key}}</td> <td><button v-on:click="deleteindex(key)">刪除</button></td> </tr> </table> </div> </template> <script> export default { name: 'app', data () { return { textmode:'', lista:[], listb:[] } },methods:{ setListA(){ this.lista.push(this.textmode); this.textmode=""; }, setOver(key){ var str = this.lista[key]; this.lista.splice(key,1); this.listb.push(str); }, deleteindex(key){ this.listb.splice(key,1); } } } </script>
活用V-MODEL標籤
V-IF的基本使用
<template> <div id="app"> <h1 v-if="booleanpar">booleanpar是true</h1> <h1 v-if="!booleanpar">booleanpar是false</h1> </div> </template> <script> export default { name: 'app', data () { return { booleanpar: true , } },methods:{ } } </script>
雙向資料繫結小示例
<template> <div id="app"> <input type="text" v-model="textmodel" v-on:keydown="setList($event)"/> <button v-on:click="setList($event)">提交未來想要做的事</button> <hr> <h1>想要做的事</h1> <table border="1" cellspacing="" cellpadding="" class="tableone"> <tr v-for="(item,key) in list" v-if="!item.stuats"> <td><input type="checkbox" v-model="item.stuats"></td> <td>{{item.text}}</td> <td>{{key}}</td> <td><button v-on:click="deleteKey(key)">刪除此內容</button></td> </tr> </table> <hr /> <h1>已完成的事</h1> <table border="1" cellspacing="" cellpadding="" class="tableone"> <tr v-for="(item,key) in list" v-if="item.stuats"> <td><input type="checkbox" v-model="item.stuats"></td> <td>{{item.text}}</td> <td>{{key}}</td> <td><button v-on:click="deleteKey(key)">刪除此內容</button></td> </tr> </table> </div> </template> <script> export default { name: 'app', data () { return { textmodel:'', list:[] } },methods:{ setList(e){ console.log(e.keyCode) if(e.keyCode==13||e.keyCode==undefined){ if(this.textmodel!=''){ var textbean = new Object; textbean.text = this.textmodel; textbean.stuats = false; this.list.push(textbean); this.textmodel=''; } } }, deleteKey(key){ this.list.splice(key,1); } } } </script>
簡單快取資料(利用localStorage.setItem設定快取值)
<template>
<div id="app" class="bodydiv">
<input type="text" v-model="textmodel" v-on:keydown="setList($event)"/>
<button v-on:click="setList($event)">提交未來想要做的事</button>
<hr>
<h1>想要做的事</h1>
<table border="1" cellspacing="" cellpadding="" class="tableone">
<tr v-for="(item,key) in list" v-if="!item.stuats">
<td><input type="checkbox" v-model="item.stuats"></td>
<td>{{item.text}}</td>
<td>{{key}}</td>
<td><button v-on:click="deleteKey(key)">刪除此內容</button></td>
</tr>
</table>
<hr />
<h1>已完成的事</h1>
<table border="1" cellspacing="" cellpadding="" class="tableone">
<tr v-for="(item,key) in list" v-if="item.stuats">
<td><input type="checkbox" v-model="item.stuats"></td>
<td>{{item.text}}</td>
<td>{{key}}</td>
<td><button v-on:click="deleteKey(key)">刪除此內容</button></td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
textmodel:'',
list:[],
}
},methods:{
setList(e){
console.log(e.keyCode)
if(e.keyCode==13||e.keyCode==undefined){
if(this.textmodel!=''){
var textbean = new Object;
textbean.text = this.textmodel;
textbean.stuats = false;
this.list.push(textbean);
this.textmodel='';
//JSON.stringify(this.list)把物件轉成字串
localStorage.setItem('list',JSON.stringify(this.list));
}
}
},
deleteKey(key){
this.list.splice(key,1);
localStorage.setItem('list',JSON.stringify(this.list));
}
},mounted(){
//和data，methods同級
/*生命週期函式,頁面重新整理時執行*/
var list = JSON.parse(localStorage.getItem('list'));
//判斷獲取的值是否為空，不為空付給引數
if(list){
this.list = list;
}
}
}
</script>但是這樣設定的話，內容是快取到了，但是點選checkbox變換他的狀態，並沒有記錄下來，所以他一直是存入的初始化給他的stutas
所以說要在當狀態改變時也要往快取裡存入一遍值
<td><input type="checkbox" v-model="item.stuats" v-on:change="saveList()"></td>
saveList(){
localStorage.setItem('list',JSON.stringify(this.list));
} 這樣雖然實現了 ，但是 裡面有了三條重複的程式碼，localStorage.setItem('list',JSON.stringify(this.list));
也許我們可以把他封裝一下
——————————————————————————————————————————————————————
方法封裝
首先先在專案中的src下建立一個資料夾，並建立個js檔案
然後在裡面編寫
//封裝操作locastorage，本地快取方法 ，模組化的檔案
//node.js 基礎（有機會再實際瞭解）
var storage = {
set(key,value){
//把物件全部轉換成字串
localStorage.setItem(key,JSON.stringify(value));
},
get(key){
var list = JSON.parse(localStorage.getItem(key));
return list;
},
remove(key){
//刪除快取鍵值對
localStorage.removeItem(key);
}
}
//暴露出去供其他呼叫（固定格式）
export default storage;個人感覺這就相當於建立了一個類。。然後去app.vue匯入他去呼叫，匯入一下下
<script>
import storage from './model/storage.js';
//看看storage暴露出來，是不是物件
console.log(storage);
</script>然後就可以這麼搞了，直接類名呼叫
<script>
import storage from './model/storage.js';
//看看storage暴露出來，是不是物件
console.log(storage);
export default {
name: 'app',
data () {
return {
textmodel:'',
list:[],
}
},methods:{
setList(e){
console.log(e.keyCode)
if(e.keyCode==13||e.keyCode==undefined){
if(this.textmodel!=''){
var textbean = new Object;
textbean.text = this.textmodel;
textbean.stuats = false;
this.list.push(textbean);
this.textmodel='';
//JSON.stringify(this.list)把物件轉成字串
storage.set('list',this.list);
}
}
},
deleteKey(key){
this.list.splice(key,1);
storage.set('list',this.list);
},
saveList(){
storage.set('list',this.list);
}
},mounted(){
//和data，methods同級
/*生命週期函式,頁面重新整理時執行*/
var list = storage.get('list');
//判斷獲取的值是否為空，不為空付給引數
if(list!=null){
this.list = list;
}
}
}
</script>