vue学习的小demo，实现简单的页面项目的增删

代码如下

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Vue</title>

    <script src="./vue.js"> </script>

    <link rel="stylesheet" href="./bootstrap.css">

</head>

   <body>

      <div id="app" >

         <dive class="panel panel-primary">

         <div class="panel-heading">

             <h3 class="panel-title">添加品牌</h3>

         </div>

        <dive class="panel-body form-inline" >

            <label >

                id:<input type="text" class="form-control" v-model="id">

            </label>

            <label >

                    name:<input type="text"  class="form-control" v-model="name">

                </label>

                <input type="button" value="添加" class="btn btn-primary" @click="ok">

                <label >

                        搜索:<input type="text"  class="form-control" v-model="keywords">

                    </label>

            <!-- form---inline 使得显示一行 -->

         </dive>

         </dive>

          <table class="table table-bordered table-hover table-striped">

              <thead>

                  <tr>

                      <th>id</th>

                      <th>名字</th>

                      <th>ctime</th>

                      <th>opertation</th>

                  </tr>

              </thead>

              <tbody>

                    <thead>

                            <tr v-for="item in serrch(keywords)" :key="item.id">

                                <th>{{item.id}}</th>

                                <th>{{item.name}}</th>

                                <th>{{item.ctime}}</th>

                                <th><a href="" @click.prevent="del(item.id)">删除 </a></th>

                            </tr>

                        </thead>

              </tbody>

          </table>

      </div>

      <script>

         var vm = new Vue({

            el: '#app',

            data: {

                id:'',

                name:'',

                keywords:'',

          list:[

              {id:1,name:'奔驰',ctime:new Date()},

              {id:2,name:'宝马',ctime:new Date()}

          ]

            },

            methods: {

                ok(){

                    // 2console.log("ok")

                    var add2={id:this.id,name:this.name,ctime: new Date() }

                    this.list.push(add2),

                    this.id=this.name=''

                }, 

                del(id){

                    // this.list.some((item,i)=>{

                    //     if(item.id==id ){

                    //         this.list.splice(i,1)

                    //     }

                    // })

                    var i=this.list.length

                    var j=0

                    for(j=0;j<i;j++){

                        if(this.list[j].id==id){

                            this.list.splice(j,1)

                        }}},

               serrch(keywords){

                   var newlist=[]

                   this.list.forEach(item=>{

                       if(item.name.indexOf(keywords)!=-1)  {

                           newlist.push(item)

                       }

                   })

                   return newlist

               }

            }

        });

      </script>

   </body>

</html>

vue自学小demo----前端的更多相关文章

  1. 一周一个小demo — 前端后台的交互实例

    这一周呢,本K在大神的指导下,完成了一个利用ajax与php文件上传处理相结合的一个留言板功能的小实例,下面就让本K来带大家瞅瞅如何实现这一种功能. 一.界面概览 首先我们来看一下这个小demo的具体 ...

  2. vue传值(小demo)

    vue+element ui实现的.解释大多在代码中(代码臭且长,有错误请指正)-- 代码如下: <template>  <div class="userList" ...

  3. Vue.js小demo

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 一个基于ES6+webpack的vue小demo

    上一篇文章<一个基于ES5的vue小demo>我们讲了如何用ES5,vue-router做一个小demo,接下来我们来把它变成基于ES6+webpack的demo. 一.环境搭建及代码转换 ...

  5. 一个基于ES5的vue小demo

    由于现在很多vue项目都是基于ES6开发的,而我学vue的时候大多是看vue官网的API,是基于ES5的,所以对于刚接触项目的我来说要转变为项目的模块化写法确实有些挑战.因此,我打算先做一个基于ES5 ...

  6. Vue.js之组件嵌套小demo

    Vue.js之组件嵌套的小demo项目 第一步:初始化一个wabpack项目,这里不在复述.第二步:在components文件夹下新建Header.vue Footer.vue和Users.vue三个 ...

  7. vue入门 0 小demo (挂载点、模板、实例)

    vue入门 0 小demo  (挂载点.模板) 用直接的引用vue.js 首先 讲几个基本的概念 1.挂载点即el:vue 实例化时 元素挂靠的地方. 2.模板 即template:vue 实例化时挂 ...

  8. 能自学成为WEB前端工程师吗？

    自学是大家学习一门it技术的时候,都会首先考虑的一种学习方式,web前端开发学习也是一样,但是自学web前端也是让大家充满疑问的一种学习方 自学是大家学习一门it技术的时候,都会首先考虑的一种学习方式 ...

  9. SpringBoot-Vue实现增删改查及分页小DEMO

    前言 主要通过后端 Spring Boot 技术和前端 Vue 技术来简单开发一个demo,实现增删改查.分页功能以及了解Springboot搭配vue完成前后端分离项目的开发流程. 开发栈 前端 开 ...

随机推荐

  1. 集成Spring-Boot与gRPC，grpc-spring-boot-starter

    项目地址:grpc-spring-boot-starter grpc是一个出身名门的RPC框架,性能高,灵活度高,支持多语言. 支持多语言,如果你的项目在使用多种语言做开发,非常推荐使用. 作为Jav ...

  2. keyword:react native bridge

    js engine native react native bridge https://cn.bing.com/images/search?view=detailV2&id=AAF39636 ...

  3. 【02】Python：数据类型和运算符

    写在前面的话 任何编程语言一开始都是从概念出发的,但各种编程语言之间的概念可能又会有差异,所以,老生常谈,我们还是需要从新过一遍 Python 的概念,当然,如果你已经是老司机了,完全可以一晃而过,不 ...

  4. STM32 串口通信基础知识

    1.串口通信简介 通信接口的两种方式: 并行通信 -传输原理:数据各个位同时传输. -优点:速度快 -缺点:占用引脚资源多 串行通信 -传输原理:数据按位顺序传输. -优点:占用引脚资源少 -缺点:速 ...

  5. python程序设计基础(程序设计基础方法)

    python初学者程序练习题 注:练习题涉及到range()函数的使用方法和python绘制,后面会单独发篇解释说明. 1.字符串拼接.接收用户输入的两个字符串,将它们组合后输出 str1=input ...

  6. ActionMq + mqttws3.1 实现持久化订阅

    activemq版本:5.15.3 Eclipse Paho MQTT JavaScript library mqttws3.1:在amq安装目录下webapp-demo目录下可以找到 实现步骤请阅读 ...

  7. 未能加载文件或程序集“Microsoft.Web.Infrastructure, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35”或它的某一个依赖项。系统找不到指定的文件。

    网站部署到IIS提示Microsoft.Web.Infrastructure,未能加载 解决方案 使用nuget安装 Microsoft.Web.Infrastructure拷贝到bin目录下面

  8. 2019 上海轻轻java面试笔试题 （含面试题解析）

      本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.上海轻轻等公司offer,岗位是Java后端开发,因为发展原因最终选择去了上海轻轻,入职一年时间了,也成为了面 ...

  9. 实验吧——因缺思汀的绕过(sql with rollup)

    题目地址:http://ctf5.shiyanbar.com/web/pcat/index.php 通读源码,得知出flag的条件 1.需要post提交uname以及pwd,否则直接die了 if ( ...

  10. Python之路(第四十七篇) 协程:greenlet模块\gevent模块\asyncio模块

    一.协程介绍 协程:是单线程下的并发,又称微线程,纤程.英文名Coroutine.一句话说明什么是线程:协程是一种用户态的轻量级线程,即协程是由用户程序自己控制调度的. 协程相比于线程,最大的区别在于 ...