Vue 简易待办事项表

news/2024/7/10 2:48:12 标签: vue, 待办事项表

文章目录

- 效果图
- 源代码

效果图

无事项时：
有事项时：

源代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>   
    <div id="app">
		<input type="text" v-model="mytext">
		<button @click="handleAdd">添加</button>
		<div v-if="items.length===0">暂无代办事项</div>
		<ol v-else>
			<li v-for="(item,index) in items">
				<button @click="handleDel(index)">删除</button>
				{{item}}
			</li>
		</ol>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
	    var app = new Vue({
	        el:"#app",
	        data: {
                items: [],
                mytext: ''
            },
            // 所有的自定义函数都写在这里
            methods: {
                handleAdd(){
					this.items.push(this.mytext);
				},
				handleDel(index){
					this.items.splice(index,1);
				}
            }
		})
	</script>
</body>

</html>

http://www.niftyadmin.cn/n/509599.html

javaScript 804. 唯一摩尔斯密码词

国际摩尔斯密码定义一种标准编码方式，将每个字母对应于一个由一系列点和短线组成的字符串， 比如: ‘a’ 对应 “.-” ， ‘b’ 对应 “-…” ， ‘c’ 对应 “-.-.” ，以此类推。为了方便，所有 26 个英文字…

【Vue】render 方法的使用

文章目录基本用法render 是字符串模板的一种替代，可以使你利用 JavaScript 的丰富表达力来完全编程式地声明组件最终的渲染输出。基本用法 render：用于编程式地创建组件虚拟 DOM 树的函数。预编译的模板，例如单文件组件中的模板&#xff0c…

【Vue】ref 的使用

文章目录基本用法ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件基本用法 ref：用于注册元素或子组件…

javaScript 1252. 奇数值单元格的数目

给你一个 m x n 的矩阵，最开始的时候，每个单元格中的值都是 0。另有一个二维索引数组 indices，indices[i] [ri, ci] 指向矩阵中的某个位置，其中 ri 和 ci 分别表示指定的行和列（从 0 开始编号）。对 in…

【JS】数组排序（六大方法）

文章目录数组排序1. sort()方法2. 冒泡排序3. 选择排序4. 插入排序5. 快速排序6. 希尔排序数组排序排序，就是把一个乱序的数组，通过我们的处理，让他变成一个有序的数组 1. sort()方法 sort() 数组对象排序其原理是冒泡排序reverse() 方法…

javaScript 字符串压缩

字符串压缩。利用字符重复出现的次数，编写一种方法，实现基本的字符串压缩功能。比如，字符串aabcccccaaa会变为a2b1c5a3。若“压缩”后的字符串没有变短，则返回原先的字符串。你可以假设字符串中只包含大小写英文字母（a…

uniapp仿oppo官网

用的oppo的接口，写了一半，有的接口调不通就搁置了，有兴趣的可以看下地址

【JS】for、for-in、for-of 循环的区别

文章目录1. for 循环2. for in 循环【ES5】3. for of 循环【ES6】1. for 循环因为数组的索引就可以获取数组中的内容，数组的索引又是按照 0-n 顺序排列，我们就可以使用 for 循环来循环数组，因为 for 循环我们也可以设置成 0-n 顺序增加&…

Vue 简易待办事项表

文章目录

效果图

源代码

相关文章