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>