VUE應用------增刪改查
阿新 • • 發佈：2018-12-11
一.增加資料：
1.首先一定要匯入vue.js，因為我是vue.js放在JS資料夾下，所以引用他的路徑即可，我一般引用路徑放在頭部；
<script src="JS/Vue.js"></script>2.原理： <input type="text" v-model="msg">--------------》新增按鈕--------------》把新增的資料填充到li標籤遍歷
<body> <div id="box"> <ul> <li v-for="item in arr"> <input type="checkbox">{{item.dec}}</input> </li> </ul> <div> <input type="text" v-model="msg"> <button v-on:click="fn1()">新增</button> </div> </div> <script type="text/javascript"> var vm=new Vue({ el:"#box", data:{ msg:'', arr:[{dec:"吃飯",bol:false},{dec:"睡覺",bol:false},{dec:"打豆豆",bol:false}] }, methods:{ fn1:function(){ this.arr.push({dec:this.msg,bol:false}) } } }) </script>
二.增加+刪除資料
原理:新增資料完後-------》點選複選框按鈕-------》點選後會觸發，將bol=false變為true,觸發類選擇器，改變他的樣式，然後點選刪除直接刪除
<body> <div id="box"> <h1>任務列表</h1> <p><span>總任務10,</span><span></span>已完成{{fn2()}}<span class="span">刪除</span></p> <ul style="list-style:none"> <li v-for="item in arr" v-bind:class="{finish:item.bol}"> <div> <input type="checkbox" v-model="item.bol" v-on:click="fn2()">{{item.dec}}</input> </div> </li> </ul> <div> <input type="text" v-model="msg"> <button v-on:click="fn1()">新增</button> </div> </div> <script type="text/javascript"> var vm=new Vue({ el:"#box", data:{ msg:'', arr:[{dec:"吃飯",bol:false},{dec:"睡覺",bol:false},{dec:"打豆豆",bol:false}] }, methods:{ fn1:function(){ this.arr.push({dec:this.msg,bol:false}) }, //雙向繫結，當點選複選框按鈕時，false--true, fn2:function(){ var num=0; this.arr.forEach(function(item){ if(!item.bol){ num++; } }) return num; } } }) </script> </body>
三.增+刪+改
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .span{ color:skyblue; } .finish{ text-decoration: line-through; color: #ccc; } </style> <script src="JS/Vue.js"></script> </head> <body> <div id="box"> <h1>任務列表</h1> <p><span>總任務10,</span><span></span>已完成{{fn2()}}<span class="span" v-on:click="fn3()">刪除</span></p> <ul style="list-style:none"> <li v-for="(item,index) in arr" v-bind:class="{finish:item.bol}"> <div v-if="item.flag"> <input type="checkbox" v-model="item.bol" v-on:click="fn2()"> <span v-on:click="fn4(index)">{{item.dec}}</span> </input> </div> <input type="text" v-else v-model="item.dec" v-on:blur="fn5(index)"> </li> </ul> <div> <input type="text" v-model="msg"> <button v-on:click="fn1()">新增</button> </div> </div> <script type="text/javascript"> var vm=new Vue({ el:"#box", data:{ msg:'', arr:[{dec:"吃飯",bol:false,flag:true},{dec:"睡覺",bol:false,flag:true},{dec:"打豆豆",bol:false,flag:true}] }, methods:{ fn1:function(){ this.arr.push({dec:this.msg,bol:false}) }, fn2:function(){ var num=0; this.arr.forEach(function(item){ if(!item.bol){ num++; } }) return num; }, fn3:function(){ for(var i=0;i<this.arr.length;i++){ if (this.arr[i].bol) { this.arr.splice(i,1); i--; } } }, fn4:function(indexs){ this.arr[indexs].flag=false; }, fn5:function(indexs1){ this.arr[indexs1].flag=true; } } }) </script> </body> </html>