vue 学习实现Todolist，组件的使用
程序员文章站
2022-07-01 18:26:38
...
下面展示一些 内联代码片。
// 实现功能是 通过input 输入内容 提交 展示在小面的列表里
点击列表里的删除 可以删除添加的列表项
// 实现代码
<html>
<head>
<title>todolist</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="input_val">
<button v-on:click="add">确定</button>
<ul>
<my_list
v-for="(item,index) in message"
:key="index" :items="item" :index="index" @delz="del">
</my_list>
</ul>
</div>
</body>
<script>
// 全局组件
Vue.component('my_list',{
props:['items','index'],
template:'<li>{{items}} <button @click="delF">删除</button></li>',
methods:{
delF:function(){
// alert(this.index)
this.$emit('delz',this.index)
}
}
})
// 声明局部组件
// var my_list={
// template:'<li>{{item}} <button @click="del(index)">删除</button></li>',
// }
var vm= new Vue({
el:"#app",
// 调用局部组件
// components:{
// my_list:my_list
// },
data:{
input_val:"",
message:[]
},
// 在 `methods` 对象中定义方法
methods:{
add:function(){
this.message.push(this.input_val)
this.input_val=""
},
del:function(index){
this.message.splice(index)
}
}
})
</script>
</html>
上一篇： 焖面和蒸面条的区别有哪些
下一篇： 如何去拆分项目中的组件?