vue语法小练习
实现功能：新增/删除 学生
<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语法小练习的更多相关文章
- 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 ...
- vue和小程序的相似之处
小程序参考vue语法,之前做过小程序的,可以逆向思维.1,Vue文件后缀是.vue,vue组件把html<template>.js<script>和css<style&g ...
- vue语法之拼接字符串
先来一行代码: <div class="swiper-slide" v-for="item in message"> <img v-bind: ...
- Sublime Text2支持Vue语法高亮显示
1.下载vue语法高亮插件vue-syntax-highlight 下载地址:https://github.com/vuejs/vue-syntax-highlight 2.将vue-syntax-h ...
- Vue + WebApi 小项目：构造自己的在线 Markdown 笔记本应用
Vue + WebApi 小项目:构造自己的在线 Markdown 笔记本应用 目录 概要 知识点 完整示例图 代码与资源文件 流程步骤 概要 基于 MVP 最小可行性产品设计理念,我们先完成一个可以 ...
- Vue之小入门
Vue之小入门 <div id="app">{{ greeting }}</div> <script> let oDiv = document. ...
- 人人开源分模块，非原生html报错，很难查找问题所在，有vue语法
<!DOCTYPE html> <html> <head> <title>学生表</title> #parse("sys/head ...
- sublime text 3 vue 语法高亮
1.下载文件 链接 https://github.com/vuejs/vue-syntax-highlight 2.sublime菜单栏->Preferences->Browse Pack ...
- vue语法精简（方便开发查阅）
vue语法精简(方便开发查阅) 指令 特殊的标签和属性 变异方法 事件修饰符 按键修饰符 表单修饰符 生命周期函数 计算属性 监听属性 子组件通过事件向父组件传递信息 在组件上使用v-model 动画 ...
随机推荐
- SQL优化系列——索引
索引可能是数据库中最被误解的主题,因为有很多方式让你糊涂索引如何工作,以及服务器如何使用它们.要正确设计索引,让索引在数据库服务器中满足以下三个重要目的:1,索引使服务器查找一组相邻行,而不是单独的行 ...
- Springboot监控之一：SpringBoot四大神器之Actuator之2--覆盖修改spring cloud的默认的consul健康检查规则
微服务网关是socket长连接与支付公司对接,该网关需要提供http接口给内部系统调用,当socket没有建立连接时(网关服务的高可用是haProxy搭建的,有些服务的socket可能未连上支付公司) ...
- Web jsp开发学习——Servlet提交表单时用法
实现提交表单以后判断输入的信息是否符合条件 若符合条件 先新建servlet Sevlet的两种声明方式,二选一即可 再到web.xml里注册 register.jsp就是表单的界 ...
- 信息安全-加密：RAS 加密
ylbtech-信息安全-加密:RAS 加密 1.返回顶部 1. RSA 是不对称的加密(加密密钥和解密密钥不同 其中 一个为公钥,一个为私钥): 公钥和私钥的产生是基于一对很大的素数(十进制来说 ...
- [转][xml]SQL转义
SQL语句包含">"和"<"时,在PL/SQL中可以正常运行,但是放在XML中,编译报错,这是因为在XML文档中的所有文本都会被解析器解析,文本内容 ...
- java Files类和Paths类的用法 (转)
http://blog.csdn.net/u010889616/article/details/52694061 Java7中文件IO发生了很大的变化,专门引入了很多新的类: import java. ...
- VLAN原理
体系结构(分层次): 更好的细化结构,能够更清楚的分析数据在整个转发过程中的变化过程.尽可能的把功能独立分开,放到不同层次上. 物理上的拓扑结构:总线型/环形/星形 逻辑上的拓扑:星形总线 OSI七层 ...
- [UE4]AnimOffset偏移动画
在每个在偏移动画要用到的动画文件中设置中设置上图属性. 也可以选择多个动画文件:
- 字符串格式化format使用
顺序传参 '{}....{}'.format(value1, value2) 索引传参 '{0}....{1}'.format(value1, value2) 关键字传参 '{k1}....{k2}' ...
- OpenGL 画出雷达动态扫描效果(二) 非底图
OpenGL 画出雷达动态扫描效果(一)中给出了已一张图片作为底图的雷达扫面程序 如果有漂亮的雷达底图的话,效果应该非常不错的,另外也可以直接手绘雷达框架 效果如下 雷达主体代码 glLineWidt ...