Vue综合指令（汽车品牌管理）

最新推荐文章于 2023-03-21 22:36:57 发布

ONE*

最新推荐文章于 2023-03-21 22:36:57 发布

阅读量219

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/xnmahahd/article/details/114765215

版权

Vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

在这里插入图片描述

index.html

<!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">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <div id="app">
        <div class="form-group">
            <label for="id">id</label>
            <input type="text"  id="id" v-model="id" >

            <label for="name">name</label>
            <input type="text"  id="name" v-model="name">
            <button type="button" class="btn btn-primary" @click="add">添加</button>
            &nbsp; &nbsp;
            <label for="name">keywords</label>
            <input type="text"  id="keywords" v-model="keywords" >
        </div>
        <table class="table">
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Ctime</th>
                <th>Operation</th>
            </tr>
            <tr v-for=  "car in search(keywords)" :key = "car.id">
                <td>{{car.id}}</td>
                <td>{{car.name}}</td>
                <td>{{car.ctime}}</td>
                <td><a href="#" @click.prevent="del(car.id)">删除</a></td>

            </tr>
        </table>
    </div>

  </body>
</html>

main.js

import Vue from 'vue'
import Bootstrap from "bootstrap/dist/css/bootstrap.min.css"
import VueResource from 'vue-resource'
var vm =new Vue({
    el:"#app",
    data:{
        id:"",
        name:"",
        keywords:"",
        carList:[{id:"1",name:"宝马",ctime:new Date()},{id:"2",name:"奔驰",ctime: new Date()}]
    },
    methods:{

        add(){
            var car={id:this.id,name:this.name,ctime:new Date()};
            this.carList.push(car);
        },

        del(id){
            //some循环：some循环和forEach不同的是，some循环内可以return true 终止循环
            this.carList.some((element,index)=>{
                alert(element.id+"\n"+index);
                if(element.id == id){
                    //删除元素
                    this.carList.splice(index,1);
                    return true;
                }
            })
        },
        search(keywords){
            return this.carList.filter((element)=>{
                return element.name.includes(keywords);
            })
        }
    }
})