vue简单实例(todolist)
2017-10-25 16:23
555 查看
本实例运用vue的一些常用指令如:v-for,v-on,v-model等;
v-on:click=”“可简写为@click=“”
v-on:click=”“可简写为@click=“”
vue+bootstrap实战
注:bootstrap是基于jQuery的,所以引入bootstrap的同时,需引入jQuery。<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css"/> <script src="js/jquery-1.7.2.js"></script> <script src="js/bootstrap.js"></script> <script src="js/vue.js"></script> <script> window.onload=function(){ new Vue({ el:"#box", data:{ myData:[], username:'', age:'', wage:'' }, methods:{ add:function(){ this.myData.push({ name:this.username, age:this.age, wage:this.wage//当点击添加时将name,age,wage推入myData中 }); this.username=''; this.age=''; //清空值 this.wage=''; }, deleteMsg:function(n){ if(n==-2){ this.myData=[];//点击全部删除 }else{ this.myData.splice(n,1);//删除 } } } }) } </script> </head> <body> <div class="container" id="box"> <form role="form"> <div class="form-group"> <label for="username">用户名:</label> <input type="text" class="form-control" id="username" v-model="username" placeholder="请输入用户名.."/> </div> <div class="form-group"> <label for="age">年 龄:</label> <input type="text" class="form-control" id="age" v-model="age" placeholder="请输入年龄.."/> </div> <div class="form-group"> <label for="wage">工 资:</label> <input type="text" class="form-control" id="wage" v-model="wage" placeholder="工资.."/> </div> <div class="form-group"> <input type="button" value="添加" class="btn btn-primary" @click="add()"/> <input type="reset" value="重置" class="btn btn-danger"/> </div> </form> <hr/> <table class="table table-bordered table-hover"> <caption class="h3">用户信息表</caption> <tr> <th class="text-center">序号</th> <th class="text-center">用户名</th> <th class="text-center">年龄</th> <th class="text-center">工资</th> <th class="text-center">操作</th> </tr> <tr class="text-center" v-for="item in myData"> <td>{{$index+1}}</td> <td>{{item.name}}</td> <td>{{item.age}}</td> <td>{{item.wage}}</td> <td> <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" @click="nowIndex=$index">删除</button> </td> </tr> <tr v-show="myData.length!=0"> <td colspan="5" class="text-center"> <button class="btn btn-danger" @click="nowIndex=-2" data-toggle="modal" data-target="#layer">全部删除</button> </td> </tr> <tr v-show="myData.length==0"> <td colspan="5" class="text-center"> 暂无数据..... </td> </tr> </table> <div role="dialog" class="modal" id="layer"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button class="close" data-dismiss="modal"> <span>×</span> </button> 确认删除吗? </div> <div class="modal-body text-right"> <button class="btn btn-primary" data-dismiss="modal" @click="deleteMsg()">确认</button> <button class="btn btn-danger" data-dismiss="modal">取消</button> </div> </div> </div> </div> </div> </body> </html>
相关文章推荐
- vue.js之 todolist 简单综合实例
- 使用Vue.js和Element-UI做一个简单登录页面的实例
- vue+webpack+vue-router+vuex+vue-resource简单实例
- vue.js实例todoList项目
- vue 简单的todolist
- vue.js单页面应用实例的简单实现
- 从vue基础开始创建一个简单的增删改查的实例代码(推荐)
- 利用vue做一个简单的todolist
- 使用Vue完成一个简单的todolist的方法
- vue.js的一个简单实例
- Vue验证码60秒倒计时功能简单实例代码
- vue.js路由参数简单实例讲解------简单易懂
- Vuejs 实现简易 todoList 功能 与 组件实例代码
- Vue实例的一些简单方法
- Vue实例简单方法介绍
- flask + vue.js 实现简单todolist应用
- Vue.js实现简单ToDoList 前期准备(一)
- vue实现简单表格组件实例详解