实现功能：新增/删除 学生

<html>

  <head>

    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

  </head>

  <body>

    <div id="app">

      <fieldset>

        <legend>学生信息新增</legend>

        <div>

          <span>姓名</span>

          <input type="text" v-model="newStudent.name" placeholder="please input your name"></div>

        <div>

          <span>年龄</span>

          <input type="text" v-model="newStudent.age" placeholder="please input your age"></div>

        <div>

          <span>性别</span>

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

            <option value="男">男</option>

            <option value="女">女</option></select>

        </div>

        <button @click="insert()">添加</button></fieldset>

      <table>

        <thead>

          <tr>

            <th>姓名</th>

            <th>年龄</th>

            <th>性别</th>

            <th>操作</th></tr>

        </thead>

        <tbody>

          <tr v-for="(st, index) in students">

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

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

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

            <td>

              <button @click="del(index)">Delete</button></td>

            <td></td>

          </tr>

        </tbody>

      </table>

    </div>

    <script>new Vue({

        el: '#app',

        data: {

          students: [{

            name: '张三',

            age: 12,

            sex: '男'

          },

          {

            name: '李四',

            age: 14,

            sex: '女'

          },

          {

            name: '王五',

            age: 15,

            sex: '男'

          },

          ],

          newStudent: {

            name: '',

            age: 0,

            sex: '男'

          }

        },

        methods: {

          insert() {

            this.students.unshift(this.newStudent)

            //重置表单数据

            this.newStudent = {

              name: '',

              age: 0,

              sex: '男'

            }

          },

          del(index) {

            this.students.shift(index, 1)

          }

        }

      })</script>

  </body>

</html>

vue语法小练习的更多相关文章

  1. python 全栈开发，Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)

    一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...

  2. vue和小程序的相似之处

    小程序参考vue语法,之前做过小程序的,可以逆向思维.1,Vue文件后缀是.vue,vue组件把html<template>.js<script>和css<style&g ...

  3. vue语法之拼接字符串

    先来一行代码: <div class="swiper-slide" v-for="item in message"> <img v-bind: ...

  4. Sublime Text2支持Vue语法高亮显示

    1.下载vue语法高亮插件vue-syntax-highlight 下载地址:https://github.com/vuejs/vue-syntax-highlight 2.将vue-syntax-h ...

  5. Vue + WebApi 小项目：构造自己的在线 Markdown 笔记本应用

    Vue + WebApi 小项目:构造自己的在线 Markdown 笔记本应用 目录 概要 知识点 完整示例图 代码与资源文件 流程步骤 概要 基于 MVP 最小可行性产品设计理念,我们先完成一个可以 ...

  6. Vue之小入门

    Vue之小入门 <div id="app">{{ greeting }}</div> <script> let oDiv = document. ...

  7. 人人开源分模块，非原生html报错，很难查找问题所在，有vue语法

    <!DOCTYPE html> <html> <head> <title>学生表</title> #parse("sys/head ...

  8. sublime text 3 vue 语法高亮

    1.下载文件 链接 https://github.com/vuejs/vue-syntax-highlight 2.sublime菜单栏->Preferences->Browse Pack ...

  9. vue语法精简（方便开发查阅）

    vue语法精简(方便开发查阅) 指令 特殊的标签和属性 变异方法 事件修饰符 按键修饰符 表单修饰符 生命周期函数 计算属性 监听属性 子组件通过事件向父组件传递信息 在组件上使用v-model 动画 ...

随机推荐

  1. MFC程序显示控制台输出

    有的时候,我们用c写的一些东西,可能需要MFC作为UI输入参数进行测试,但是程序里有大量的printf操作,这就需要MFC程序启动的时候同时打开 一个控制台,用于标准输出 查询网络,大致方法有以下两种 ...

  2. 自动化 数据分离 --A文件里面的类 中的函数 调用 B文件里面类 的函数 的方法

    记录: bb 要实例化 self.dr=dr,那么 iber_test类的 self.dr 才能带过去

  3. eclipse安装、汉化、搭建安卓开发环境

    1.eclipse与jdk的位数(32bit or 64bit )要对应,否则会提示Failed to load JNI shared library.提示这一种错误据说还有另外一种原因就是Path路 ...

  4. HTTP 2.0 原理详细分析

    HTTP 2.0是在SPDY(An experimental protocol for a faster web, The Chromium Projects)基础上形成的下一代互联网通信协议.HTT ...

  5. [UE4]一分钟实现聊天系统

    天系统:客户端发消息到服务器端,服务器端把收到的消息广播到所有客户端. 由于聊天对象需要支持“可复制”和每个客户端都发给一个,所以GameInstance.GameModeGameState都不适合存 ...

  6. SpringMVC 源码分析

    一个东西用久了,自然就会从仅使用的层面上升到探究其原理的层面,在javaweb中springmvc更是如此,越是优秀的框架,其底层实现代码更是复杂,而在我看来,一个优秀程序猿就相当于一名武林高手,不断 ...

  7. npm 淘宝镜像

    npm config set registry https://registry.npm.taobao.org

  8. [UE4]C++实现动态加载的问题：LoadClass<T>()和LoadObject<T>() 及 静态加载问题：ConstructorHelpers::FClassFinder()和FObjectFinder()

    转自:http://aigo.iteye.com/blog/2281558 动态加载UObject和动态加载UClass分别用LoadObject<T>(),和LoadClass<T ...

  9. eMTC/NB/LTE拨号

    挂起-恢复流程挂起恢复流程是eMTC/NB-IoT等蜂窝物联网技术才引进的,LTE并不具备这样的流程.这种机制的引入主要针对物联网海量连接,不活跃小数据包的特点,适时的挂起流程可以减少网络的资源开销, ...

  10. for 练习

    一张纸的厚度是0.0001米,将纸对折,对折多少次厚度超过珠峰高度8848米 var height = 0.00001; for (var i = 1; true; i++) { height *= ...