初识Vue，简单的todolist
2024-10-10 05:32:31
vue开发源码：https://vuejs.org/js/vue.js
todolist代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue入门</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<input v-model="inputValue" type="text" name="">
<button @click="submit">提交</button> <ul>
<todo-item
v-for="(item, index) in list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
@update="handleUpdate"
>
</todo-item>
</ul>
<input v-model="updateValue" type="text" name="">
<button @click="update">确定</button>
</div>
</body>
<script type="text/javascript"> Vue.component("todo-item", {
props:["content", "index"],
template:'<li>{{content}} <button @click="handleClick">remove</button><button @click="handleUp">update</button></li>',
methods:{
handleClick:function() {
this.$emit('delete', this.index)
},
handleUp:function() {
this.$emit('update', this.index)
}
}
}) new Vue({
el:"#app",
data: {
inputValue : '',
updateValue : '',
in:'',
list:[]
},
methods: {
submit:function() {
if(this.inputValue.trim() !== "") {
this.list.push(this.inputValue);
}
this.inputValue = ''
},
handleDelete: function(index) {
this.list.splice(index, 1);
},
handleUpdate: function(index) {
this.updateValue = this.list[index]
this.in = index;
},
update: function() {
console.log(this.in)
this.list.splice(this.in, 1, this.updateValue);
this.updateValue = ''
}
}
})
</script>
</html>
重点：子组件与父组件的值传递
最新文章
- spring boot整合shiro出现UnavailableSecurityManagerException
- 关于在程序中 文件新生成 在用os.system（）程序对新生成的文件处理 举个栗子 如下：
- World of Warcraft
- In Action(SPFA+01背包)
- Unix Linux 编程书籍
- 制作越狱版本的ipa文件
- 【转】 iOS使用AVFoundation实现二维码扫描
- C#中关于DBNULL的处理方法
- UpdateModel方法
- 2013集训.DAY21.A
- cadence pcb 设计学习记录提纲
- 【LeetCode】258. Add Digits
- 微信开发系列——微信订阅号前端开发利器：WeUI
- Linxu命令与文件的搜索 - which, whereis, locate, find
- 20165234 《Java程序设计》第五周学习总结
- Python爬虫：如何爬取分页数据？
- shell监控脚本实例—监控mysql主从复制
- 【BZOJ】1679: [Usaco2005 Jan]Moo Volume 牛的呼声（数学）
- http状态码+http请求方式
- webapi2返回 已拒绝为此请求授权。