点击提交添加列表，点击列表，删除组件
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-modle="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml" xmlns: xmlns: xmlns:
xmlns:>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 组件拆分
props: 接收组件传递下来的参数
this.$emit('say',this.index) : 将子组件的点击事件传递给父组件 并将index 传递出去
-->
<div id="root">
<div>
<input v-model="todolist"/>
<button @click="submit">提交</button>
</div>
<ul>
<todo-item
v-for="(item,index) of list2"
:key="index"
:content="item"
:index="index"
@say="clickSay"
>
</todo-item>
</ul>
</div>
<script>
Vue.component('todo-item', {
props: ['content','index'],
template: '<li @click="clickItem">{{content}}</li>',
methods:{
clickItem:function () {
this.$emit('say',this.index)
}
}
})
new Vue({
el: "#root",
data: {
todolist: "",
list2: []
},
methods: {
submit: function () {
this.list2.push(this.todolist)
this.todolist = ""
},
clickSay:function (index) {
this.list2.splice(index,1)
}
},
})
</script>
</body>
</html>
596
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
