vue小練習

這一次小練習主要複習了vue組件，自定義事件和watch屬性監聽方面的知識。

效果圖如下：

html部分代碼:

<div id="main">
		<input type="text" name="" value="請輸入編輯的內容" v-model="val">
		<span class="Btn" class="btn" v-on:click="add">添加</span>
		<br><br>
		<span class="Btn" v-if="edit_judge">{{index+1}}</span><input type="text" name="" v-if="edit_judge" v-model="edit_content">
		<br>
		<ul>
			<record v-for="(item,index) in words" 
					:mes="item"
					:index="index"
					v-on:deliver="Del"
					v-on:deliver_edit="Edit">
			</record>
		</ul>
		<br><br>
		<span class="Btn">總計有{{words.length}}條數據</span>
	</div>

js部分:

<script type="text/javascript">
		Vue.component("record",{
			props:["mes","index"],
			template:"<li>{{mes}}<a class='btn' v-on:click='del'>刪除</a><a class='btn' v-on:click='edit'>{{text}}</a></li>",
			data(){
				return{
					text:"編輯"
				}
			},
			methods:{
				del(){
					this.$emit("deliver",this.index);
				},
				edit(){
					this.$emit("deliver_edit",this.index,this.text);
					if (this.text=="編輯") {
						this.text="確認";
					}else{
						this.text="編輯";
					}
				}
			}
		});
		new Vue({
			el:"#main",
			data:{
				words:[],
				val:"",
				edit_judge:false,
				edit_content:"",
				index:0
			},
			methods:{
				add(){
					if (this.val=="") {
						alert("內容不能爲空!");
						return;
					}
					this.words.push(this.val);
					this.val="";
				},
				Del(i){
					this.words.splice(i,1);
				},
				Edit(i,txt){
					this.edit_content="";
					this.index=i;
					if (txt=="編輯") {
						this.edit_judge=true;
					}else{
						this.edit_judge=false;
					}
				}
			},
			watch:{
				edit_content(val){
					if (val!="") {
						this.words[this.index]=val;
					}
				}
			}
		});
	</script>