基于vue.js的增删改

最新推荐文章于 2024-10-02 05:39:15 发布

m0_70127476

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量74

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_70127476/article/details/132183997

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>
<body>
  <div id="app">
    <div class="modal" v-show='isshow'>
      <div class="cotain">
        <div class="title"><span>编辑</span><span @click='isshow=false'>x</span></div>
        <div class="content">
          <input type="text" placeholder="标题" v-model='keywords'><br>
          <input type="text" placeholder="作者" v-model='tempItem.author'><br>
          <input type="date" v-model='tempItem.createtime'><br>
          <button @click=updateItem()>确认</button>
          <button @click='isshow=false'>取消</button>
        </div>
      </div>
    </div>
    <input type="text" placeholder="标题" v-model='keywords'><br>
    
    <input type="text" placeholder="标题" v-model='newItem.title'>
    <input type="text" placeholder="作者" v-model='newItem.author'>
    <input type="date" v-model='newItem.createtime'>
    <button @click='addItem'>确定</button>
    <table border="1" width='600'>
      <tr bgcolor='lightblue'>
        <th>序号</th>
        <th>标题</th>
        <th>作者</th>
        <th>日期</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item,index) in fillist">
        <td>{{index+1}}</td>
        <td>{{item.title}}</td>
        <td>{{item.author}}</td>
        <td>{{item.createtime}}</td>
        <td>
          <a href="javascript:void(0);" @click=deleteItem(item)>删除</a>|
          <a href="javascript:void(0);" @click=editItem(item,index)>编辑</a>

        </td>
      </tr>
    </table>
  </div>
</body>
</html>
<!-- <script src="./js/vue.js"></script>  //js代码为vue2的js代码 -->
		<script>
			// 初始化vue实例
			new Vue({
				el: '#app',
				data: {
					keywords:'',
					isshow: false, //是否显示模态框
					editIndex: null, //正在编辑的行号
					newItem: { //新增的对象
						title: "",
						author: '',
						createtime: ''
					},
					tempItem: { //正在编辑的对象
						title: "",
						author: '',
						createtime: ''
					}, //新增的对象
					list: [{
							title: "奇酷",
							author: 'mdy',
							createtime: '2022-09-30'
						},
						{
							title: "考研",
							author: 'dyh',
							createtime: '2022-09-28'
						}
					]
				},
				methods: {
					//添加
					addItem() {
						// 向list新增item
						this.list.unshift({
							...this.newItem
						});
						//清空数据
						this.newItem = {
							title: "",
							author: '',
							createtime: ''
						}
					},
					//删除
					deleteItem(obj) {
						var index = this.list.indexOf(obj);
						if (confirm("确认删除吗?")) {
							this.list.splice(index, 1);
						}
 
					},
					//编辑渲染
					editItem(item, index) {
						// 1、显示模态框
						this.isshow = true;
						// 2、渲染数据
						this.tempItem = {
							...item
						};
						this.editIndex = index; //正在编辑的行
 
					},
					// 确认修改
					updateItem() {
						this.list[this.editIndex] = {
							...this.tempItem
						};
						//关闭模态框
						this.isshow=false;
						//清空
						this.tempItem = { //正在编辑的对象
							title: "",
							author: '',
							createtime: ''
						}
					}
				},
				computed:{
					//过滤出的list	
					fillist(){
						if(this.keywords.trim()==""){
							return this.list;
						}else{
							return this.list.filter(item=>{
								return item.title.includes(this.keywords);
							})
						}
						
					}
				}
			})
		</script>