<link href="~/Content/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="~/Content/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/Content/js/jquery-1.8.2.min.js"></script>
<script src="~/Content/js/bootstrap.min.js"></script>
<script src="~/Scripts/vue.min.js"> </script>
<style> </style> <div class="container" id="app">
<form v-on:submit.prevent="add">
<div class="form-group">
<label>
姓名
<input placeholder="姓名" class="form-control" v-model="name" />
</label>
</div>
<div class="form-group">
<label>
年龄
<input placeholder="年龄" class="form-control" v-model.number="age" />
</label>
</div>
<button type="submit" class="btn btn-primary">提交</button>
<button type="reset" class="btn btn-default">重置</button> <table class="table table-bordered table-hover">
<tr class="text-center text-success">
<th class="text-center">序号</th>
<th class="text-center">姓名</th>
<th class="text-center">年龄</th>
<th class="text-center">操作</th>
</tr> <tr class="text-center" v-for="(item ,i) in list">
<td>{{i+}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td><button class="btn btn-danger" type="button" data-toggle="modal" data-target="#myModal" v-on:click="nowIndex=i">删除</button></td>
</tr>
<tr class="text-center" v-show="list.length>0">
<td colspan="">
<button class="btn btn-danger" type="button" data-toggle="modal" data-target="#myModal" v-on:click="nowIndex=-1">删除全部</button>
</td>
</tr>
<tr v-show="list.length==0">
<td colspan="" class="text-center text-muted">
<p>暂无信息</p>
</td>
</tr>
</table>
</form> <!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="delok(nowIndex)">确定</button>
</div>
</div>
</div>
</div>
</div> <script>
new Vue({
el: "#app",
data: {
name:"",
age: "",
nowIndex:"",
list: [{
name: "张三", age:
},
{
name: "李四", age:
}, ], },
methods:{
add: function () {
this.list.push({ name: this.name, age: this.age });
this.name = this.age = "";
},
delok: function (n) {
if (n ==-) {
this.list = [];
} else {
this.list.splice(n, );
}
} }
})
</script>

一个Vue实例-添加、显示列表、删除的更多相关文章

  1. 创建第一个vue实例

    一.vue安装与下载 1. 官网下载  下载地址 选择开发版本 2. 打开sublime,新建vue文件夹,将下载好的代码vue.js放入vue文件夹中. 3. 新建index.html文件,在hea ...

  2. 前端框架之Vue(1)-第一个Vue实例

    vue官方文档 知识储备 es6语法补充 let 使用 var 声明的变量的作用域是全局. { var a = 1; } console.info(a); 例1: var arr = []; for ...

  3. vue3官网介绍,安装,创建一个vue实例

    前言:这一章主要是vue的介绍.安装.以及如何创建一个vue实例. 一.vue介绍 vue3中文官网:建议先自己看官网. https://v3.cn.vuejs.org/ vue是渐进式框架,渐进式指 ...

  4. vue.js开发环境搭建以及创建一个vue实例

    Vue.js 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 在使用 vue.js ...

  5. 创建一个vue实例

    创建一个vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 MVVM 模型,但是 Vue ...

  6. 2-1 创建第一个Vue实例

    https://cn.vuejs.org/ 生产版本是经过压缩后的版本,它里面把一些没用的警告的代码删除掉了所以它会更精悍一些. 直接引入CDN的网址我们就可以使用Vuejs了.使用生产版本或者CDN ...

  7. 用vue写添加数据、删除数据、筛选数据表格

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

  8. Vue使用v-for显示列表时,数组里的item数据更新,视图中列表不同步更新的解决方法

    由于初始化类型错误导致的不更新,代码是这样的: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  9. 创建一个 Vue 的实例

    每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({         // 选项 }) 选项:el.data.methods el: 类型: ...

随机推荐

  1. Linux下c语言实现myod

    首先根据od要输出16进制的功能,以及c语言中文件的打开读取等函数,编写了如下代码. #include<stdio.h> #define N 1000 int main() { int c ...

  2. 20155209 2016-2017-2 《Java程序设计》第十周学习总结

    20155209 2016-2017-2 <Java程序设计>第十周学习总结 教材学习内容总结 计算机网络,是指分布在不同地理区域的计算机用通信线路互连起来的一个具有强大功能的网络系统.网 ...

  3. [2016北京集训测试赛5]azelso-[概率/期望dp]

    Description Solution 感谢大佬的博客https://www.cnblogs.com/ywwyww/p/8511141.html 定义dp[i]为[p[i],p[i+1])的期望经过 ...

  4. 【转载】关于RenderTarget的注意事项

    原文:关于RenderTarget的注意事项 1. 设置一个RenderTarget会导致viewport变成跟RenderTarget一样大 2. 反锯齿类型必须跟DepthStencilBuffe ...

  5. 使用github高级搜索

    想瞅瞅github上面有哪些中国开发者最活跃,followers最多.可以按照下面的步骤: 打开github的搜索页面 输入 location:china .点search 然后选择不同的排序方式. ...

  6. Error running 'Tomcat 7': Unable to open debugger port (127.0.0.1:9342)

    这个只需要把java虚拟机进程结束掉就行了

  7. Entity Framework中执行Sql语句

           如果想在EF框架中执行Sql语句,其实很简单,EF里面已经提供了相关的方法(此处使用的EF为EF4.1版本).        EF中提供了两个方法,一个是执行查询的Sql语句SqlQue ...

  8. 基于testng自动化添加allure报告展示以及jenkins集成

    本地执行方式: 1.下载地址 http://allure.qatools.ru/ 2.执行机器添加环境变量 如mac:vi /etc/profile export ALLURE_HOME=/Users ...

  9. Ubuntu 安装python后,安装python-dev

    1.通常情况下: sudo apt install python-dev 或者 在 sudo apt install python 命令下安装应该也附带了 python-dev 上述 pyhthon ...

  10. 图 -数据结构(C语言实现)

    读数据结构与算法分析 坑!待填! 若干定义 一个图G = (V , E)由顶点集V和边集E组成,每条边就是一个点对 如果点对是有序的,那么就叫做有向图 边可能还具有第三种成分,权值 无向图种从每个顶点 ...