<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="vue.js"></script>
</head>
<body>
<!--挂载点-->
<div id="demo">
<!--双向绑定-->
<input v-model="v"/><button v-on:click="submitData">add</button>
<!--插值;v-if -->
<p v-if="show">{{count}}</p>
<p>
<!--事件；方法-->
<button v-on:click="disappear">display switch</button>
</p>
<p>{{vAndCount}}</p>
<ul>
<!-- 组件，v-for,template--><!--监听delete-event事件，触发就执行deleteData方法-->
<lie v-for="(element,index) of list"
v-bind:item="element"
v-bind:key="index"
v-bind:index="index"
v-on:delete-event="deleteData"
></lie>
</ul>
</div>
<script>
<!--组件-->
Vue.component('lie',{
props:['item','index'],
template:'<li v-on:click="sentDeleteCmd">{{item.id}} {{item.name}} {{index}}</li>',
methods:{
sentDeleteCmd:function(){
<!--定义delete-event事件-->
this.$emit('delete-event',this.index)
}
}
})
var app=new Vue({
<!--挂载点-->
el:'#demo',
<!--数据-->
data:{
v:'',
count:0,
show:true,
list:[{id:1,name:'zhao'},{id:2,name:'ming'}]
},
<!--方法-->
methods:{
disappear:function(){
this.show=!this.show
},
submitData:function(){
this.list.push({id:this.list.length+1,name:this.v})
this.v=''
},
deleteData:function(i){
this.list.splice(i,1)
}
},
<!--计算-->
computed:{
vAndCount:function(){
return '当前内容为：'+this.v+',变动了'+this.count+'次'
}
},
<!--监听-->
watch:{
v:function(){
this.count++
}
}
})
</script>
</body>
</html>
5364
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
