第二集图书管理功能（一）

xi_weina

已于 2024-01-10 14:26:18 修改

阅读量418

点赞数 9

CC 4.0 BY-SA版权

文章标签： vue.js html5 前端

于 2024-01-02 15:32:49 首次发布

本文链接：https://blog.csdn.net/xi_weina/article/details/135342253

实现添加删除替换按钮

1、添加数据功能

2、删除功能

3、替换功能

代码如下

<html>
	<head>
		<meta charset="UTF-8">
    	<title>Document</title>
	</head>
	<body>
		<div id = "app">
			<div>
				<span>
					<input type="text" v-model= 'fname'>
					<button @click='add'>添加</button>
					<button @click='del'>删除</button>
					<button @click='change'>替换</button>

				</span>
			</div>
			<ul>
				<li :key='index' v-for='(item,index) in list'>{{item}}</li>
			</ul>
		</div>
		<script src="js/vue.js"></script>
		<script>
			var vm = new Vue({
				el:'#app',
				data: {
					fname:'',
					list: ['apple','orange','banana']
				},
				methods: {
					add:function(){
						console.log(111);
						this.list.push(this.fname);
					},
					del:function(){
						console.log(111);
						this.list.pop();
					},
					change:function(){
						this.list = this.list.slice(0,2);
					}
				}
			});
		</script>
	</body>
</html>