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 动画 ...
随机推荐
- 利用cbmakegen导出Code::blocks的Makefile
首先到官网下载cbmakegen 官网地址:http://developer.berlios.de/projects/cbmakegen/ 也可通过我的百度网盘下载 [windows版本]地址:htt ...
- 使用IDEA进行Lua代码调试、自动提示、代码跳转、智能重命名
试了几个Lua IDE后,Lua Studio.Lua Glider.VS+babelua插件.Sublime都不是特别满意.直到发现了国人自创的另一个神奇工具:基于IDEA的EmmyLua插件.该插 ...
- SCCM 2012 R2实战系列之十三：辅助站点部署
由于最近几个月一直处于AD升级项目中,很久没有更新SCCM的技术文档了.SCCM 2012中的辅助站点部署方法还是比较特别的,需要注意的地方也非常多,今天跟大家分享辅助站点的具体部署和配置方法. 1. ...
- JDK1.6 Java.lang.Null.Pointer.Exception
先来看一下JDK1.6的API: NullPointerException (Java Platform SE 6) public class NullPointerException extends ...
- Servlet（API）生命周期
一.最上层接口Servlet 查看Servlet接口源码: 有5个方法 访问过程(默认): 1.进行Servlet类加载 当Tomcat容器启动后,服务器寻找应用部署的描述文件(web.xml),从部 ...
- 第6章 静态路由和动态路由（3）_RIP动态路由协议
5. RIP动态路由协议 5.1 RIP协议(Routing Information Protocol) (1)是一个距离矢量路由选择协议.选择最佳路径的标准是跳数,如果到达目标网络经过的路由器最少, ...
- FAILED: Execution Error, return code 1 from org.apache.hadoop.hive.ql.exec.DDLTask. com/mongodb/util/JSON
问题: 将MongoDB数据导入Hive,按照https://blog.csdn.net/thriving_fcl/article/details/51471248文章,在hive建外部表与mongo ...
- 配置Jsp错误页面
配置Jsp错误页面一般我们有2种做法: (1)在页面中用指令进行配置,即page指令的errorPage和isErrorPage:可以使用page指令的errorPage来指定错误页!在当前JSP页面 ...
- hadoop分布式集群的搭建
电脑如果是8G内存或者以下建议搭建3节点集群,如果是搭建5节点集群就要增加内存条了.当然实际开发中不会用虚拟机做,一些小公司刚刚起步的时候会采用云服务,因为开始数据量不大. 但随着数据量的增大才会考虑 ...
- 小米造最强超分辨率算法 | Fast, Accurate and Lightweight Super-Resolution with Neural Architecture Search
本篇是基于 NAS 的图像超分辨率的文章,知名学术性自媒体 Paperweekly 在该文公布后迅速跟进,发表分析称「属于目前很火的 AutoML / Neural Architecture Sear ...