提示：input输入点击提交，则列表增加一条文本，点击列表内任意一条文本信息，则删除该条文本信息
1、首先在html的<code><head>标签中</code>导入vue.js
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2、在body中创建一个应用vue模板的容器
// vue起作用的区域root
<div id="root">
// input与mesg数据绑定
<input v-model="mesg" />
<button @click="handle">提交</button>
<ul>
<todo-item v-for='(item,index) in list' :key='index' :index='index' :content='item' @delete='deletes'></todo-item>
</ul>
</div>
3、在script标签中创建并注册名为todo-item的组件
Vue.component('todo-item', {
props: ['content', 'index'],
template: '<li @click="handelClick">{{content}}</li>',
methods: {
handelClick: function() {
//点击li元素就触发delete方法
this.$emit('delete', this.index);
}
}
})
4、在script标签中初始化vue实例
new Vue({
el: '#root',
data() {
return {
list: [],
mesg: ''
}
},
methods: {
//点击提交按钮，输入文本信息就加入列表
handle: function() {
if(this.mesg==''){
return;
}
this.list.push(this.mesg);
this.mesg = ''
},
deletes: function(index) {
alert(index)
this.list.splice(index, 1);
}
}
})
第三步与第四步截图
网友评论