<!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学习-6-核心类：字符串StringJoiner 和数组一起玩

    public class Main { public static void main(String[] args) { String[] names = {"Bob", &quo ...

  2. 行为识别TSM训练ucf101数据集

    序言 最近有个行为检测的需求,打算用行为识别做,纯小白入这个方向,啃了两周的TSM原理和源码,训练好自己的数据集后,发现好像没法应用到自己的需求场景??玛德!算了,还是要记录一下.原理就没别要讲了,网 ...

  3. Javascript+webdriverio实现app自动化demo

    1.新建工程和安装库 使用WebStorm新建一个空项目然后在编辑器打开终端输入如下命令: npm init -y npm install webdriverio npm install sleep ...

  4. Mybatis-Plus中的@TableName 和 table-prefix

    简介 本文介绍Mybatis-Plus中的@TableName 和 table-prefix的使用. 介绍 在 MyBatis-Plus 中,@TableName 注解和 table-prefix 配 ...

  5. JVM 的组成

    JVM 的组成 JVM(Java Virtual Machine)是 Java 的核心组件,负责执行 Java 字节码程序.以下是 JVM 的主要组成部分: 1. 类加载子系统(Class Loade ...

  6. Cgroup之内存子系统

    Memory 子系统主要完成两件事: (1)控制一组进程使用内存资源的行为: (2)统计 cgroup 内进程使用内存资源的信息.在实际业务场景中,主要是为了避免某些应用大量占用内存资源(可能是由于内 ...

  7. EFCore Study(四)——Select的应用及不走联表查外键字段的操作

    一.EFCore里Select的应用: 1)避免查询select *,可指定查询合适的字段 var comment = context.artitles.Select(c =>new { Id ...

  8. Nacos源码—3.Nacos集群高可用分析

    大纲 1.Nacos集群的几个问题 2.单节点对服务进行心跳健康检查和同步检查结果 3.集群新增服务实例时如何同步给其他节点 4.集群节点的健康状态变动时的数据同步 5.集群新增节点时如何同步已有服务 ...

  9. 算法：请找出数组a所有重复元素和比较数组a和数组b得到不重复的新数组和比较数组a和数组b请找出所有重复元素

    /** * 1.给定数组int[] a,int[] b * (1)请找出数组a所有重复元素,例:int[] a = {1,2,3,4,8,9,3,5,1,3},结果int[] a1 = {1,1,3, ...

  10. P11071 「QMSOI R1」 Distorted Fate题解

    题意: 给定一个序列,给定两种操作: 将一个区间异或上一个给定的值. 给定 \(l,r\) 求 \[{\large (\sum_{i=l}^r\bigcup_{j=l}^i A_j) \bmod 2^ ...