vue.js简单添加和删除
这只是个简单的添加和删除,没有连接后台数据的
<%@ 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简单添加和删除的更多相关文章
- 原生JS动态添加和删除类
原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...
- 后盾网lavarel视频项目---vue实现动态添加和删除板块
后盾网lavarel视频项目---vue实现动态添加和删除板块 一.总结 一句话总结: 原理就是:列表时根据vue中的videos变量中的元素来遍历的,初始时videos:[{title:'',pat ...
- 使用Bootstrap + Vue.js实现 添加删除数据
界面首先需要引入bootstrap的css和bootstrap的js文件,还有vue.js和jQuery.js才可以看见效果. 这里提供bootstrap的在线文件给大家引用: <!-- 最新版 ...
- vue.js实现添加删除
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue.js简单的应用
1:一个简单实现 下面代码部分: <body> <div id="myDiv1"> {{userName}} </div> </body& ...
- 98、vue.js简单入门
本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...
- 13、vue.js简单入门
本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...
- vue.js+SSH添加和查询
Vue.js 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与 ...
- Vue.js简单入门
这篇文章我们将学习vue.js的基础语法,对于大家学习vue.js具有一定的参考借鉴价值,有需要的朋友们下面来一起看看. Vue.js是一个数据驱动的web界面库.Vue.js只聚焦于视图层,可以很容 ...
随机推荐
- Python 精进版SVIP版通过队列实现一个生产者消费者模型
import time from multiprocessing import Process,Queue,JoinableQueue #生产者 def producer(q): for i in r ...
- Selenium·自动化基础
date:2018505+2018506 day05+06mor 一.安装环境 1.cmd→pip install selenium 2.将浏览器驱动放入X:\Python27下(如chromedri ...
- JAVA002标识符的命名规则、关键字
标志符命名规则: 1.标志符可以由字母.数字.下划线(_)和美元符号($)组成,不能以数字开头($sen.Void) 2.标志符严格区分大小写 3.标志符不能是Java的关键字和保留字(eg:publ ...
- .net4.0调用非托管DLL的异常捕获
转发: 由于有些非托管的DLL内部异常未有效处理,当托管程序调用到这样的DLL时,就引起托管程序意外退出. 托管程序使用通常的捕获try……catch块不起作用.原因是.NET 4.0里新的异常处理机 ...
- CCF-20170903-JSON查询
这道题当时考ccf,五道题中做的时间最长的一道题....可惜最好只有0分!! 后来重现写了一下--(110行超级麻烦 主要思想:就是先对括号经行匹配,创建的时候分为创建表和创建元素两种情况,难点在于对 ...
- 《DSP using MATLAB》Problem 7.5
- php读取不到指定的php.ini配置
新建启动脚本 启动时指定路径 解决方案一:修改 /etc/init.d/php-fpm 文件 1 # 在这行命令上添加 指定的配置路径 2 php_opts="--fpm-config $ ...
- Java注解总结2
注解是Java元数据,可以理解成代码的标签,正确使用能极大的简化代码的编写逻辑,在各种框架代码中使用也越来越多. 一.注解的应用场景 生成doc文档: 编译器类型格式检查: 运行时处理如注入依赖等 二 ...
- IDEA整合Junit测试框架
首先说一下为什么会有这篇文章吧,百度没有找到一个我想要的答案.也可以理解为,作为一个java菜鸟,一个对idea和jar理解不深的人,想跟着博客一步步操作完之后发现,哎不行,之后的牢骚吧.主要是为了记 ...
- py-day3-3 python 函数的作用域
def test1(): print('in the test1') def test(): print('in the test') return test1 print(test) res = t ...