这只是个简单的添加和删除，没有连接后台数据的

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

</head>

<body>

    <div id="app" style="width:500px">

        <fieldset>

            <legend>添加用户信息</legend>

            <div class="form-groud" >

                <label>姓名：</label>

                <input type="text" v-model="newPerson.name"/>

            </div>

            <div class="form-groud">

                <label>年龄：</label>

                <input type="text" v-model="newPerson.age"/>

            </div>

            <div class="form-groud">

                <label>爱好：</label>

                <select v-model="newPerson.hobby">

                    <option value="体育">体育</option>

                    <option value="阅读">阅读</option>

                    <option value="旅游">旅游</option>

                </select>

            </div>

            <div class="from-groud">

                <label></label>

                <button @click="createPerson">添加</button>

            </div>

        </fieldset>

        <table width="500px" border="1px">

            <tr>

                <td>姓名</td>

                <td>年龄</td>

                <td>爱好</td>

                <td>操作</td>

            </tr>

            <tr v-for="person in people">

                <td>{{person.name}}</td>

                <td>{{person.age}}</td>

                <td>{{person.hobby}}</td>

                <td :class="'text-center'"><button @click="deletePerson($index)">删除</button></td>

            </tr>

        </table>

    </div>

</body>

<script type="text/javascript" src="${pageContext.request.contextPath}/js/vue.js "></script>

<script>

    var wm = new Vue({

        el:'#app',

        data:{

            newPerson:{

                name:'',

                age:'',

                hobby:''

            },

            people:[{

                name:'Lucy',

                age:,

                hobby:'阅读'

            },

            {

                name:'张三',

                age:,

                hobby:'体育'

            }]

        },

        methods:{

            createPerson: function(){

                this.people.push(this.newPerson);

                // 添加完newPerson对象后，重置newPerson对象

                this.newPerson = {name: '', age: , sex: 'Male'}

            },

            deletePerson:function(index){

                this.people.splice(index,);

            }

        }

    });

</script>

</html>

vue.js简单添加和删除的更多相关文章

  1. 原生JS动态添加和删除类

    原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...

  2. 后盾网lavarel视频项目---vue实现动态添加和删除板块

    后盾网lavarel视频项目---vue实现动态添加和删除板块 一.总结 一句话总结: 原理就是:列表时根据vue中的videos变量中的元素来遍历的,初始时videos:[{title:'',pat ...

  3. 使用Bootstrap + Vue.js实现 添加删除数据

    界面首先需要引入bootstrap的css和bootstrap的js文件,还有vue.js和jQuery.js才可以看见效果. 这里提供bootstrap的在线文件给大家引用: <!-- 最新版 ...

  4. vue.js实现添加删除

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

  5. Vue.js简单的应用

    1:一个简单实现 下面代码部分: <body> <div id="myDiv1"> {{userName}} </div> </body& ...

  6. 98、vue.js简单入门

    本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...

  7. 13、vue.js简单入门

    本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...

  8. vue.js+SSH添加和查询

    Vue.js 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与 ...

  9. Vue.js简单入门

    这篇文章我们将学习vue.js的基础语法,对于大家学习vue.js具有一定的参考借鉴价值,有需要的朋友们下面来一起看看. Vue.js是一个数据驱动的web界面库.Vue.js只聚焦于视图层,可以很容 ...

随机推荐

  1. jdbc “贾琏欲执事”

    “贾琏欲执事” 1.加载驱动2.获取连接3.SQL语句4.执行SQL5.释放资源 示例: public void test_insert() { String driver="oracle. ...

  2. linux （centOS）安装jdk+tomcat+nginx

    一..安装jdk, 下载jdk有两种方式: 1.直接去官网找相应版本下载:http://www.oracle.com/technetwork/java/javase/downloads/index.h ...

  3. python rtree包查找三维空间下的最近设备

    rtree模块有2个常用的类:rtree.index.Index和rtree.index.Property.其中rtree.index.Index用于进行数据操作,rtree.index.Proper ...

  4. Struts2-052 RCE CVE-2017-9805

    从struts2的官网下载最后受影响的版本struts-2.5.12,地址: http://archive.apache.org/dist/struts/2.5.12/struts-2.5.12-ap ...

  5. web前端3.0时代，“程序猿”如何“渡劫升仙”？

    世界上目前已经有超过18亿的网站.其中只有不到2亿的网站是活跃的.且每天都有几千个新网站不断被创造出来. 2017年成果显著,网络上出现了像Vue这样的新JavaScript框架:基于用户体验流程的开 ...

  6. 算法图解 (Aditya Bhargava 著)

    第1章 算法简介第2章 选择排序第3章 递归第4章 快速排序第5章 散列表第6章 广度优先搜索第7章 狄克斯特拉算法第8章 贪婪算法第9章 动态规划第10章 K最近邻算法第11章 接下来如何做 第1章 ...

  7. c# winform窗体如何设置才可以不能随意拖动大小

    执行以下两个步骤,能够禁止用户改变窗体的大小 (一)步骤1 设置窗体的FormBorderStyle属性为下列五个值中的任意一个 None:将窗口设置为无边框.无标题栏.用户无法改变窗口的大小,也无法 ...

  8. java_字段声明

    多字段继承,为避免混淆,simple name与qualified name的使用 package java20180129_1; interface Frob { float v=2.0f; } c ...

  9. WebForm AnyWay

    项目地址 :  https://github.com/kelin-xycs/WebFormAnyWay WebForm AnyWay 用 WebForm 构建 简洁高效 的 Web 应用 WebFor ...

  10. powershell中设置变量并启动Tomcat

    假设tomcat安装在 C:\GreenSoftware\apache-tomcat-9.0.14 目录. 使用powershell进入到此目录.执行命令 $Env:JAVA_HOME="C ...