vue的一个简单案例

增删查改

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css"href="element-ui/lib/theme-chalk/index.css" /></head><body><!--el-table 数据表格表格属性:data 显示的数据 是一个数组stripe 斑马纹border 带边框的表格el-table-column 表格的列prop/property  对应列内容的字段名label 显示的标题width 对应列的宽度--><div id="app" ><el-row style="margin-top:10px"><el-col :span="20" :offset="2"><el-button type="success" @click="openAddDialog"  round>添加</el-button></el-col></el-row><el-row style="margin-top:10px"><el-col  :span="20" :offset="2"><el-table :data="heros"stripe border style="width: 100%" ></el-table-column><el-table-column type="selection" width="55"></el-table-column><el-table-column type="index" width="50"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="sex" label="性别" width="180"><template slot-scope="scope"><span v-if="scope.row.sex==1" style="color: red;">女</span><span v-else style="color: royalblue;">男</span></template></el-table-column><el-table-column prop="title" label="称号" width="180"></el-table-column><el-table-column prop="profession" label="职业" width="180"><template slot-scope="scope"><span v-if="scope.row.profession==0">法师</span><span v-else-if="scope.row.profession==1">射手</span><span v-else-if="scope.row.profession==2">战士</span><span v-else>刺客</span></template></el-table-column><el-table-column prop="operation" label="操作" width="180"><!--如果想自定义这一列的格式或者内容，列中使用template定义scope.$index 获取行的索引--><template slot-scope="scope"><el-button size="small "  @click="updatehero(scope.$index, scope.row)" type="primary" icon="el-icon-edit" circle></el-button><el-button size="small " @click="deletehero(scope.$index)"   type="danger" icon="el-icon-delete" circle></el-button></template></el-table-column></el-table></el-col></el-row><!--el-dialog添加模态框titlle 标题visible.sync 是否打开模态框width 宽度--><el-dialogtitle="添加":visible.sync="addDialogVisible"width="30%"><!--el-form 表单model 表单数据对象 绑定data中的对象rules 使用验证规则el-form-item 表单字段label 标签文本prop 指定使用哪一个规则进行验证 -- 必须和字段名保持一致如果定义了rules和prop只是有验证的样式，验证功能需要在表单提交之前手动调用方法验证--><el-form ref="addform" :rules="rules"  :model="addhero" label-width="80px"><el-form-item label="姓名:" prop="name"><el-input v-model="addhero.name"></el-input></el-form-item><el-form-item label="性别:"><el-radio v-model="addhero.sex" :label="1" >女</el-radio><el-radio v-model="addhero.sex" :label="2">男</el-radio></el-form-item><el-form-item label="称号:"><el-input v-model="addhero.title"></el-input></el-form-item><el-form-item label="职业:"><el-select v-model="addhero.profession"  clearable placeholder="请选择"><!--label 选项的标签value 选项的值--><el-optionv-for="profession in professions":label="profession.name":value="profession.id"></el-option></el-select></el-form-item></el-form><!--底部的按钮--><div slot="footer" class="dialog-footer"><el-button @click="addDialogVisible = false">取 消</el-button><el-button type="primary" @click="savehero">确 定</el-button></div></el-dialog></div><script type="text/javascript" src="js/vue.js" charset="utf-8"></script><script type="text/javascript" src="element-ui/lib//index.js" charset="utf-8"></script><script type="text/javascript">var heros = [{id:'0',name:'艾希',sex:1,title:'寒冰射手',profession:1},{id:'1',name:'盖伦',sex:2,title:'德玛西亚之力',profession:2},{id:'2',name:'赵信',sex:2,title:'德邦总管',profession:2},{id:'3',name:'刀男',sex:2,title:'刀锋之影',profession:3}]var app = new Vue({el:"#app",data:{heros:heros,addDialogVisible:false,addhero:{name:null,age:null,sex:1,title:null,profession:null},professions:[{id:0,name:"法师"},{id:1,name:"射手"},{id:2,name:"战士"},{id:3,name:"刺客"}],rules:{//对哪个字典定义验证规则name:[{ required: true, message: '请输入姓名', trigger: 'blur' }]}},methods:{deletehero(index){this.$confirm('亲，你真的要放弃他嘛?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.heros.splice(index,1),this.$message({type: 'success',message: '再见!'});})},//点击添加按钮的回调openAddDialog(){//清空表单this.addhero = {name:null,sex:1,title:null,profession:null},this.addDialogVisible =true},//确定添加savehero(){//调用表单的验证方法//首先需要获取到表单组件对象this.$refs["addform"].validate((valid) => {if (valid) {//验证通过，提交//将addhero的对象添加到heros数组的末尾//对象的复制this.heros.push(this.copyObj(this.addhero))//提示信息成功this.$message({message: '添加成功!',type: 'success'});//关闭模态框this.addDialogVisible = false} else {//验证不通过，阻止提交return false;}});},//对象复制copyObj(obj){var newObj  = {}for(var p in obj){newObj[p] = obj[p]}return newObj;},
//                  updatehero(index){
//
//                  this.addhero = heros[index]
//                  this.addDialogVisible = true;
//                  }//点击编辑按钮updatehero(index,row){this.addDialogVisible = true; //编辑信息模态框显示this.addhero = Object.assign({}, row); // 获得所有数据显示在编辑信息模态框里面,将源对象（source）的所有可枚举属性，复制到目标对象（target）//this.addhero = heros[index];}}})</script></body>
</html>

vue的一个简单案例相关推荐

vue设置一个简单的计算器
vue设置一个简单的计算器 <div id="app"><input type="text" v-model="n1"&g ...
BaseAdapter的一个简单案例
BaseAdapter的一个简单案例主Activity import android.os.Bundle; import android.app.Activity; import android.v ...
java计算机毕业设计vue开发一个简单音乐播放器（附源码、数据库）
java计算机毕业设计vue开发一个简单音乐播放器(附源码.数据库) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Ec ...
java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署本源码技 ...
java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署
java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署 java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署本源 ...
JAVA毕业设计vue开发一个简单音乐播放器计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计vue开发一个简单音乐播放器计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计vue开发一个简单音乐播放器计算机源码+lw文档+系统+调试部署+数据库本源码技术栈: 项目 ...
一个简单案例教你如何用Typescript写Vuex
案例源代码: github.com/danielhuoo/- 前言相信很多人都像我一样,学习使用了vuex后,想把项目改写成Typescript.但是官方教程要么晦涩难懂,要么缺少鲜活的例子.我花了 ...
vue实现一个简单的购物车功能
今天做了一个简单的购物车功能,主要用了计算属性,指令等知识点,代码如下: <template> <div><div id="cart" v-cloak ...
vue spa php,使用Laravel 和 Vue 构建一个简单的SPA
本教程是作者自己在学习Laravel和Vue时的一些总结,有问题欢迎指正. Laravel是PHP的一个框架,Vue是前端页面的框架,这两个框架如何结合起来构建一个SPA(Single Page Ap ...

vue的一个简单案例

vue的一个简单案例相关推荐

最新文章

热门文章