Vue学习之todolist功能开发
2024-08-25 04:19:37
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue</title>
<script src="vue.js"></script>
</head>
<body>
<!-- todolist功能开发
-->
<div id="root">
<div>
<input v-model="inputValue" />
<button @click="handleSubmit">提交</button>
</div>
<ul>
<li v-for="(item, index) of list" :key="index">
{{item}}
</li>
</ul>
</div>
<script>
new Vue({
el:"#root",
data:{
inputValue: 'hello',
list: []
},
methods: {
handleSubmit: function() {
this.list.push(this.inputValue)
this.inputValue = ''
}
}
})
</script>
</body>
</html>
最新文章
- actor concurrency
- JavaScript事件对象与事件处理程序
- C 语言中 setjmp 和 longjmp
- memcpy函数
- 如何在Ubuntu/CentOS上安装Linux内核4.0
- 查找字符串的 KMP 算法
- MongoDB 3 + Windows 7 X64安装及配置
- vs克隆新建团队项目
- ZOJ 4114 Detect the Virus（AC自动机）
- Django Tutorial 学习笔记
- Android快捷支付SDK Demo resultStatus={4001};memo={參数错误};result={}问题
- [WPF疑难] 继承自定义窗口
- 11.2.0.4 aix下运行第二个节点root.sh报错处理
- Linux快捷键 Linux权限
- synchronized 关键字解析
- Spring Data JPA方法定义规范
- 复旦高等代数II（16级）每周一题
- Redis在CentOS7中的启动警告
- background 和渐变 总结
- H2内嵌数据库使用步骤