1. 程式人生 > >VUE應用------增刪改查

VUE應用------增刪改查

一.增加資料:

     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>