vue笔记之v-model

最新推荐文章于 2024-08-26 23:54:47 发布

qq_36781179

最新推荐文章于 2024-08-26 23:54:47 发布

阅读量114

点赞数

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.csdn.net/qq_36781179/article/details/82745945

本文介绍了一个使用 Vue.js 实现的简易待办事项应用。该应用包含输入框用于添加待办事项，并通过回车键触发添加操作。已添加的事项显示在一个列表中。本文档展示了基本的 Vue.js 组件定义、数据绑定及事件监听器的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!-- 按回车键添加内容 -->
<input v-model="todoText" v-on:keyup.enter="addText">
<ul>
	<li v-for="item in items">
		{{item.text}}
	</li>
</ul>
<script>
export default {
  name: 'App',
  data: function () {
    return {
	    items: [],
	    todoText:''
   }
    
  },
  methods: {
    addText: function () {
	 this.items.push({
		text: this.todoText
	});
	this.todoText = "";    
    }
  }
}
</script>