vue的一个简单案例

最新推荐文章于 2024-11-17 20:07:48 发布
原创 最新推荐文章于 2024-11-17 20:07:48 发布 · 663 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

博客提及增删查改，这是信息技术中常见操作，在数据库、系统管理等场景广泛应用。

增删查改
在这里插入图片描述

<!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-dialog
  		title="添加"
 		 :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-option
					      v-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案例练习
08-10
vue案例练习
vue简单项目实例（router方式）
07-04
vue-cli搭建的vue实例，用router和组件的简单实例，下载后请cnpm install后npm run dev运行
vue项目实例
04-01
新手学习vue的最佳demo实例，整合了vue的各类组件以及各种指令等等
一个简单的vue项目案例（一）项目准备工作
yyun05的博客
08-21 389
一、创建项目 二、运行项目 三、 清空自带的内容 四、下载并引用reset.css ，重置样式 https://meyerweb.com/eric/tools/css/reset/ 在main.js中引用 //reset.css ===> 重置样式 import'./assets/css/reset.css' 五、 下载并引用fastClick，重置样式 GitHub - ftlabs/fastclick: Polyfill to remove clic...
一、vue简单示例
光明小学王小雨的博客
10-28 6698
一、django模板变量和vue冲突解决 {{ }} 如果不可避免的在同一个页面里既有 django 渲染又有 vue 渲染的部分，可有 2 种方式解决 方法一：采用 vue 的 delimiters 分隔符。 new Vue({ delimiters: ["{[", "]}"] // 可自定义符号 }) 方法二：建议把 vue 的部分用 {% verbatim %} 包起来。我这里使用这种方法 见文档：https://docs.djangoproject.com/en/2.2/ref/templa
vue实现购物车小案例
12-13
Vue.js 是一个流行的轻量级前端框架，用于构建用户界面。...总的来说，这个购物车案例展示了 Vue.js 如何结合 HTML、CSS 和 JavaScript 来构建一个简单的交互式应用，通过数据驱动视图，简化了前端开发过程。
vue简单登录小案例
04-28
在这个“vue简单登录小案例”中，我们将深入探讨Vue的核心概念，包括路由（vue-router）、路由嵌套、axios数据交互以及vuex状态管理。 首先，让我们来理解Vue Router。Vue Router是Vue.js官方的路由库，它允许我们...
Vue大屏可视化案例资源
05-29
在“Vue大屏可视化案例资源”中，我们可以深入学习如何利用Vue.js进行大屏数据可视化的开发，这对于那些希望提升Vue技能并对此领域感兴趣的人来说是一份宝贵的资料。 在大屏可视化领域，主要目标是将复杂的数据以...
一个vue项目实战简单的案例.zip
02-29
在“一个vue项目实战简单的案例”中，我们可以深入理解Vue.js的基础概念和核心特性，通过实际操作来提升对Vue的掌握程度。 1. **Vue.js基础知识** - **模板语法**：Vue.js使用了基于HTML的模板语法，允许开发者...
vue仿美团简单案例
05-10
在本Vue仿美团简单案例中，我们主要探讨的是如何利用Vue.js框架构建一个类似美团的网页应用。Vue.js是一款轻量级的前端JavaScript框架，它以其数据绑定、组件化和易于学习的特点广受开发者喜爱。在这个项目中，我们...
一个关于Vue的实例项目
01-16
一个非常不错的Vue实例项目，可以用来学习参考，里面还有附带部署的步骤
vue项目例子
03-15
这是一个完整的项目的案例，关于一个微信公众号的，从项目的部署开始各个页面都有。
【vue小案例】
qq_47168657的博客
11-06 699
vue的双for循环案例，表格案例，选项卡切换发布评论案例
Vue小案例（一）
SAKURAjinx的博客
10-18 1545
那么就需要v-if 来进行条件渲染，注意这里不用v-show，因为v-show只是控制元素的显示隐藏，而不会真正控制元素节点的创建删除。创建图示这么个成绩表，包含三个科目及其编号成绩，显示总分和平均分，并可以进行添加成绩和删除成绩的操作(删除所有数据后显示暂无数据)。删除就是将bookList对应的数组元素删除，那么del方法需要接收参数来确定删除哪一项。现在有5张图片，我想通过点击上一张 / 下一张的按钮来进行图片切换。当上一张到第1张位置时，再点上一张会出错，同样的下一张也是。6、计算总分、平均分。
最简单新手vuex案例（一）
weixin_30587025的博客
09-15 384
本人写的小程序，功能还在完善中，欢迎扫一扫提出宝贵意见！ 如果你是新手还不会搭建vue项目，请点击立即跳转查看如何搭建vue项目。 第一步：安装 安装vuex：npm install vuex --save安装Element-ui：npm i element-ui -S 第二步：创建文件夹，并且写入内容如下...
一个简单的vue项目案例（二）目录结构搭建
yyun05的博客
08-21 301
目录结构 Home引用Banner <template> <div class="home"> <Banner></Banner> </div> </template> <script> import Banner from './Banner' export default { components:{ Banner } } </scrip.
Vue练习案例
coder_Alger 的博客
10-31 367
案例代码展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户登录切换的小案例</title> </head> <body> <div id="app"> <span...
Vue练习案例（上）
最新发布
ljz2016的博客
11-17 407
案例一：入门，基本语法----点击事件，参数双向绑定。案例三：v-for与列表。案例二：V-for用法。
Vue 案例练习
白菜执笔人的博客
03-26 1445
项目前导 学习笔记 一、图书管理系统（当然是假的，没有与数据库进行交互）         给大家介绍一个 web 页面样式的网站，直接复制它的代码可以更方便的开发。         Bootstrap 官网：https://www.bootcss.com/         该...
用vue写一个echarts简单案例
08-11
### 回答1： 可以参考下面的代码：// 安装ECharts npm install echarts --save// 引入ECharts主模块 import echarts from 'echarts'// 初始化echarts实例 let myChart = echarts.init(document.getElementById('myChart'))// 设置图表的配置项和数据 let option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] };// 使用刚指定的配置项和数据显示图表 myChart.setOption(option); ### 回答2： Vue是一个用于构建用户界面的渐进式框架，而Echarts是一款基于 JavaScript 的可视化库。通过结合Vue和Echarts，我们可以方便地使用Vue的数据绑定能力来动态渲染和更新Echarts图表。 下面是一个简单的案例，使用Vue和Echarts来展示一个柱状图。 首先，我们需要在Vue项目中安装Echarts库。可以通过npm命令来安装： ``` npm install echarts --save ``` 然后，在Vue组件中引入echarts： ```javascript import echarts from 'echarts' ``` 接下来，我们可以在Vue组件的`mounted`生命周期钩子中初始化并渲染图表。 ```javascript export default { mounted() { // 初始化图表 const myChart = echarts.init(this.$refs.chart); // 定义图表的配置选项 const options = { xAxis: { type: 'category', data: ['苹果', '香蕉', '橘子', '梨子', '草莓'] }, yAxis: { type: 'value' }, series: [{ data: [12, 15, 10, 8, 7], type: 'bar' }] }; // 使用配置选项渲染图表 myChart.setOption(options); } } ``` 最后，在Vue组件的模板中添加一个div元素用于渲染echarts图表： ```html <template> <div ref="chart" style="width: 400px; height: 400px;"></div> </template> ``` 这样，当我们运行Vue项目时，就能看到一个简单的柱状图被渲染出来了。 以上是一个简单的使用Vue和Echarts的案例，通过Vue的数据绑定能力，我们可以动态更新图表的数据，并实现更复杂的数据可视化效果。 ### 回答3： Vue是一个用于构建用户界面的渐进式JavaScript框架，而ECharts是一个用于可视化数据的JavaScript图表库。结合Vue和ECharts可以轻松创建一个简单而强大的图表应用。 首先，我们需要在Vue项目中安装ECharts。可以通过npm安装echarts和vue-echarts这两个包。命令如下： ``` npm install echarts vue-echarts ``` 安装完成后，在Vue组件中引入ECharts并创建一个基本的图表实例。我们可以在`created`生命周期钩子中设置图表的配置项和数据，并在`mounted`生命周期钩子中调用`setOption`方法渲染图表。 假设我们要创建一个简单的柱状图，代码如下： ``` <template> <div class="chart-container"> <div ref="chart" class="chart"></div> </div> </template> <script> import * as echarts from 'echarts'; export default { mounted() { this.renderChart(); }, methods: { renderChart() { const chart = echarts.init(this.$refs.chart); const options = { xAxis: { type: 'category', data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }, yAxis: { type: 'value' }, series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'bar' }] }; chart.setOption(options); } } } </script> <style> .chart-container { width: 100%; height: 400px; } .chart { width: 100%; height: 100%; } </style> ``` 在上述代码中，我们通过`import`语句引入了`echarts`库，然后在`mounted`生命周期钩子中使用`echarts.init`方法创建了一个图表实例。接着，我们定义了图表的配置项和数据，并通过`chart.setOption(options)`方法来设置这些配置项。最后，在`template`部分定义了一个占位的`<div>`元素，将其作为图表容器，并在`mounted`生命周期钩子中调用`this.renderChart()`方法来渲染图表。 这样，我们就完成了一个使用Vue和ECharts编写的简单图表案例。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值