<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <link rel="stylesheet" href="styles/demo.css" />

    </head>

    <style>

    * {

    margin: 0;

    padding: 0;

    box-sizing: border-box

}

html {

    font-size: 12px;

    font-family: Ubuntu, simHei, sans-serif;

    font-weight: 400

}

body {

    font-size: 1rem

}

table,

td,

th {

    border-collapse: collapse;

    border-spacing: 0

}

table {

    width: 100%

}

td,

th {

    border: 1px solid #bcbcbc;

    padding: 5px 10px

}

th {

    background: #42b983;

    font-size: 1.2rem;

    font-weight: 400;

    color: #fff;

    cursor: pointer

}

tr:nth-of-type(odd) {

    background: #fff

}

tr:nth-of-type(even) {

    background: #eee

}

fieldset {

    border: 1px solid #BCBCBC;

    padding: 15px;

}

input {

    outline: none

}

input[type=text] {

    border: 1px solid #ccc;

    padding: .5rem .3rem;

}

input[type=text]:focus {

    border-color: #42b983;

}

button {

    outline: none;

    padding: 5px 8px;

    color: #fff;

    border: 1px solid #BCBCBC;

    border-radius: 3px;

    background-color: #009A61;

    cursor: pointer;

}

button:hover{

    opacity: 0.8;

}

#app {

    margin: 0 auto;

    max-width: 640px

}

.form-group {

    margin: 10px;

}

.form-group > label {

    display: inline-block;

    width: 10rem;

    text-align: right;

}

.form-group > input,

.form-group > select {

    display: inline-block;

    height: 2.5rem;

    line-height: 2.5rem;

}

.text-center{

    text-align: center;

}

.pagination {

    display: inline-block;

    padding-left: 0;

    margin: 21px 0;

    border-radius: 3px;

}

.pagination > li {

    display: inline;

}

.pagination > li > a {

    position: relative;

    float: left;

    padding: 6px 12px;

    line-height: 1.5;

    text-decoration: none;

    color: #009a61;

    background-color: #fff;

    border: 1px solid #ddd;

    margin-left: -1px;

    list-style: none;

}

.pagination > li > a:hover {

    background-color: #eee;

}

.pagination .active {

    color: #fff;

    background-color: #009a61;

    border-left: none;

    border-right: none;

}

.pagination .active:hover {

    background: #009a61;

    cursor: default;

}

.pagination > li:first-child > a .p {

    border-bottom-left-radius: 3px;

    border-top-left-radius: 3px;

}

.pagination > li:last-child > a {

    border-bottom-right-radius: 3px;

    border-top-right-radius: 3px;

}</style>

    <body>

        <div id="app">

            <fieldset>

                <legend>

                    Create New Person

                </legend>

                <div class="form-group">

                    <label>Name:</label>

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

                </div>

                <div class="form-group">

                    <label>Age:</label>

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

                </div>

                <div class="form-group">

                    <label>Sex:</label>

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

                    <option value="Male">Male</option>

                    <option value="Female">Female</option>

                </select>

                </div>

                <div class="form-group">

                    <label></label>

                    <button @click="createPerson">Create</button>

                </div>

        </fieldset>

        <table>

            <thead>

                <tr>

                    <th>Name</th>

                    <th>Age</th>

                    <th>Sex</th>

                    <th>Delete</th>

                </tr>

            </thead>

            <tbody>

                <tr v-for="(person,index) in people">

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

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

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

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

                </tr>

            </tbody>

        </table>

        </div>

    </body>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js">

    </script>

    <script>

        var vm = new Vue({

            el: '#app',

            data: {

                newPerson: {

                    name: '',

                    age: 0,

                    sex: 'Male'

                },

                people: [{

                    name: 'Jack',

                    age: 30,

                    sex: 'Male'

                }, {

                    name: 'Bill',

                    age: 26,

                    sex: 'Male'

                }, {

                    name: 'Tracy',

                    age: 22,

                    sex: 'Female'

                }, {

                    name: 'Chris',

                    age: 36,

                    sex: 'Male'

                }]

            },

            methods:{

                createPerson: function(){

                    this.people.push(this.newPerson);

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

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

                },

                /*这种写法也成

                deletePerson: function(person){

                    this.people.splice(this.people.indexOf(person),1);

                } */

                deletePerson: function(index){

                    this.people.splice(index,1);

                }

            }

        })

    </script>

</html>

注意下遍历的写法哦，删除函数两种写法都行。创建函数一定要重置下对象，不然添加的都是同一行。

遍历：

用如下的方法获得遍历的下标

 <tr v-for="(person,index) in people">
如果纯数字遍历就更简单了，‘基础一’举例了，
<div id="div1">

    <div v-for="i in 10">

     {{ i }}

    </div>

</div>
 

 

vue入门（二）基于前面的基础的一个小Demo的更多相关文章

  1. 基于Two.js实现的一个小demo，星球环绕动画效果

    下面是核心js code HTML就不贴了,需要引入two.js文件: var elem = document.getElementById('draw-animation'); var two = ...

  2. vue入门(二)----模板与计算属性

    其实这部分内容我也是参考的官网:http://cn.vuejs.org/v2/guide/syntax.html,但是我还是想把自己不懂的知识记录一下,加深印象,也可以帮助自己以后查阅.所谓勤能补拙. ...

  3. 2、链接数据库+mongodb基础命令行+小demo

    链接数据库并且打印出数据的流程:1.在CMD里面输入 mongod 2.在CMD里面输入 mongo 3.在输入mongodb命令行里面进行操作,首先输入 show dbs 来查看是否能够链接得上库4 ...

  4. Vue入门笔记（一）--基础部分

    github地址:https://github.com/iTao9354/basicVue(demo01-28) 一.初识Vue 使用双大括号{{message}}将数据渲染进DOM中.      可 ...

  5. 无废话MVC入门教程二[第一个小Demo]

    mvc技术交流,欢迎加群: 本文目标 1.了解"模型"."视图"."控制器"的创建.调试和使用过程. 本文目录 1.创建模型 2.创建视图 ...

  6. MVC入门教程二[第一个小Demo]（转载）

    本文目标 1.了解"模型"."视图"."控制器"的创建.调试和使用过程. 本文目录 1.创建模型 2.创建视图 3.创建控制器 4.调试 5 ...

  7. 一周一个小demo — vue.js实现备忘录功能

    这个vue实现备忘录的功能demo是K在github上找到的,K觉得这是一个用来对vue.js入门的一个非常简单的demo,所以拿在这里共享一下. (尊重他人劳动成果,从小事做起~  demo原git ...

  8. Python创建二维数组(关于list的一个小坑)

    0.目录 1.遇到的问题 2.创建二维数组的办法 3.1 直接创建法 3.2 列表生成式法 3.3 使用模块numpy创建 1.遇到的问题 今天写Python代码的时候遇到了一个大坑,差点就耽误我交作 ...

  9. SpringSecurity实战记录（一）开胃菜：基于内存的表单登录小Demo搭建

    Ps:本次搭建基于Maven管理工具的版本,Gradle版本可以通过gradle init --type pom命令在pom.xml路径下转化为Gradle版本(如下图) (1)构建工具IDEA In ...

  10. 基于python2.7 Tkinter 做一个小工具

    1.源码:先写一个界面出来,放需要放入的点击事件的函数 # -*- coding:utf-8 -*- import Tkinter from Tkinter import * import Excle ...

随机推荐

  1. 【Java】常用类

    一.String类 java.lang.String类的使用 注意:String可以String s = "";,是因为String类型在后面自动补充了'\0' char初始化不能 ...

  2. Go语言实现1024终端游戏-不到400行代码

    先放源码地址,喜欢看源码翻源码,喜欢看文章的继续继续看文章 https://github.com/taadis/go1024 - go1024 使用 go 语言实现的 1024 终端游戏,不到400行 ...

  3. Java8 Lambda Collection 的常见用法

    import cn.hutool.core.collection.CollUtil; import cn.hutool.core.collection.ListUtil; import cn.huto ...

  4. 什么是 Write-Ahead Logging (WAL) 技术？它的优点是什么？MySQL 中是否用到了 WAL？

    什么是 Write-Ahead Logging (WAL) 技术? Write-Ahead Logging (WAL) 是一种用于数据库系统的日志记录技术,它要求在对数据库进行任何修改之前,所有的修改 ...

  5. Java编程之容器类

    一.ArrayList 1.创建ArrayList对象 ArrayList<String> arr=new ArrayList<>(); //添加<>的为泛型 // ...

  6. 多文件，从url地址中下载文件并进行压缩

    直接上代码 Controller层 //我这里直接拿实体接收,entity.getFile()是List<对象>,对象里面存储文件相关的内容 @PostMapping("/zip ...

  7. 36.7K star！拖拽构建AI流程，这个开源LLM应用框架绝了！

    36.7K star!拖拽构建AI流程,这个开源LLM应用框架绝了! 只需拖拽节点,5分钟搭建专属AI工作流! Flowise 是一款革命性的低代码LLM应用构建工具,开发者通过可视化拖拽界面,就能快 ...

  8. k8s之ingress反向代理pod

    Ingress controller Nginx -->后来改造 Traefik -->也是用于微服务 Envoy  -->微服务 Ingress资源 目前使用0.17.1版本ing ...

  9. MCP 实践系列：股票分析

    今天,我们介绍了一个通过 Financial Datasets 获取股票市场数据的接口.这个接口不仅支持其他 AI 助手通过 MCP 接口 直接检索关键的财务数据(如损益表.资产负债表.现金流量表), ...

  10. 'invalid flag in #cgo LDFLAGS: -w' 问题解决

    当我们在go项目中使用C库,或者引用的第三方库有使用C库,有时候会遇到 invalid flag in #cgo LDFLAGS: -w 这种错误. 这是因为在项目代码中,使用了#cgo指令符(dir ...