<!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. 在类 Unix 系统中将 Nginx 源码导入 CLion 并调试运行

    零.写在最前面 0.1 关于系统 如标题所述,本文的操作需要一个类 Unix 系统(MacOS.CentOS.Ubuntu 等). 同时这些类 Unix 系统还需要有 gcc 编译器.具体如何搞定这些 ...

  2. 字符串匹配究极大招【KMP】:带你一步步从原理到构建

    目录 前言 KMP原理 什么是前缀表 如何构建前缀表 next数组 使用next数组做匹配 实战演练 前言 一文带你了解如何去理解并实现KMP算法.本文用于记录自己的学习过程,同时向大家进行分享相关的 ...

  3. DNS滥用如何进行防范？

    在当今数字化浪潮汹涌的时代,域名系统宛如互联网的基石,稳稳承载着将人们日常使用的便捷域名,精准转换为计算机能够识别与处理的IP地址这一关键任务.其重要性不言而喻,然而,随着DNS在全球范围内的广泛普及 ...

  4. PHP中的精确计算bcadd，bcsub，bcmul，bcdiv 及 扩展安装

    <?php/** * 精确加法 * @param [type] $a [description] * @param [type] $b [description] */function math ...

  5. 可轻便docker部署的密码保存系统：Vaultwarden

    一.简介 Vaultwarden是著名的Bitwarden项目的一个分支,是一个社区驱动的项目,使用Rust语言编写.它是Bitwarden的轻量级自托管替代方案,完全兼容Bitwarden客户端协议 ...

  6. 个人对Debian桌面系统的简单使用分享

    前言 自从安装Debian12作为双系统已经过了大半个月,平常主用Debian,偶尔切回Windows找找文档,总体来说体验还是很不错的.先贴个桌面照 为什么要使用Linux作为个人桌面 当初刚从Wi ...

  7. Oracle链接服务器导致SQL Server异常终止

    现象 首先该链接服务器是使用 OraOLEDB provider (OLEDB Provider for Oracle)创建的,在使用该链接服务器的SQL语句中出现特殊字符 "--" ...

  8. vue3 基础-补充 ref & provide-inject

    本篇主要对一些被以前内容(渲染, 传值) 等忽略的几个常用小技巧进行补充说明啦. v-once 即对某个dom节点生效, 其会限定只会渲染一次, 不论数据是如何的变化, 演示如下: <!DOCT ...

  9. JS如何实现远程控制：一步步教你掌握技术

    @charset "UTF-8"; .markdown-body { line-height: 1.75; font-weight: 400; font-size: 15px; o ...

  10. asp.net core的launchSettings.json

    { "profiles": { "welcomeMiddleware": { "commandName": "Project&qu ...