vue-复选框的增加和删除案例

最新推荐文章于 2023-09-22 11:12:55 发布

天马行空zqzq

最新推荐文章于 2023-09-22 11:12:55 发布

阅读量2k

点赞数

本文链接：https://blog.csdn.net/qq_42039912/article/details/107150789

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>	
		.addClass {
			text-decoration: line-through;	
		}

	</style>
</head>
<body>
	<div id="app">
		<h1>todo</h1>
		<!-- 选出todos里面，没有被选择的复选框，计算它的唱的 -->
		<p>{{todos.filter(item => !item.done).length}} of {{todos.length}} remaining [archive]</p>
		<p v-for="(item, index) in todos">
			<!-- 鼠标enter键抬起也可以添加 不过为啥不起作用。。。。难办-->
			<input type="checkbox" v-model="item.done" @keyup.enter="add">
			<!-- v-bind 为元素添加类，addClass 为类名，后面是个boolean类型，为true则添加这个类，false则不添加 -->
			<span v-bind:class="{addClass: item.done}">{{item.title}}</span>
			<button @click="remove(index)" >删除</button>
		</p>
		<input type="text" v-model="text"><button @click="add">add</button>
	</div>
	<script src="node_modules/vue/dist/vue.js"></script>
	<script>
	var todos = [
		{
			id: 1,
			title: '吃饭',
			done: false
		},
		{
			id: 2,
			title: '睡觉',
			done: true
		},
		{
			id: 3,
			title: '打豆豆',
			done: false
		}
	]

	var app = new Vue({
		el: '#app',
		data: {
			todos,
			text: ''

		},
		methods: {
			add: function () {
				if( !this.text) {
					return
				}
				var text = this.text.trim()
				var adds = {
					id: this.todos[this.todos.length-1].id + 1,
					title: text,
					done: false
				}
				todos.push(adds)
				//添加完毕之后输入框清空
				this.text = ''
			},
			remove: function (index) {
				todos.splice(index, 1)
			}
		}
	})

	</script>
</body>
</html>

天马行空zqzq

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
vue-复选框的增加和删除案例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .addClass { text-decoration: line-through; } </style></head><body> <div id="app".
复制链接

扫一扫