• JSD-2204-Vue-ElementUI-Day06

    1.Vue

    1.1显示隐藏相关指令

    • v-if="变量"; 让元素是否显示和变量进行绑定,true显示 false 删除元素
    • v-else; 让元素是否显示和上面元素v-if的状态相反
    • v-show="变量"; 让元素是否显示和变量进行绑定, true显示, false 隐藏
    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title></title>
    6. 	</head>
    7. 	<body>
    8. 		<div>
    9. 			<!-- v-if:让元素是否显示和变量进行绑定，不显示时元素被删除 -->
    10. 			<p v-if="isShow">紫罗兰的永恒花园</p>
    11. 			<p v-else>某科学的超电磁炮</p>
    12. 			<!-- v-show：让元素是否显示和变量进行绑定，不显示时元素被隐藏
    13. 			 （需要频繁进行显示隐藏状态切换时使用）-->
    14. 			<p v-show="isShow">狐妖小红娘</p>
    15. 		</div>
    16. 	</body>
    17. 	<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    18. 	<script type="text/javascript">
    19. 		let v = new Vue({
    20. 			el:"body>div",
    21. 			data:{
    22. 				isShow:true
    23. 			}
    24. 		})
    25. 	</script>
    26. </html>

    1.2vue小练习

    1.2.1员工列表练习

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>员工列表</title>
    6. 	</head>
    7. 	<body>
    8. 		<div>
    9. 			<input type="text" placeholder="姓名" v-model="name">
    10. 			<input type="text" placeholder="工资" v-model="salary">
    11. 			<input type="text" placeholder="工作" v-model="job">
    12. 			<input type="button" value="添加" @click="f()">
    13. 			<table border="1">
    14. 				<caption>员工列表</caption>
    15. 				<tr>
    16. 					<th>姓名</th>
    17. 					<th>工资</th>
    18. 					<th>工作</th>
    19. 				</tr>
    20. 				<tr v-for="emp in arr">
    21. 					<td>{{emp.name}}</td>
    22. 					<td>{{emp.salary}}</td>
    23. 					<td>{{emp.job}}</td>
    24. 				</tr>
    25. 			</table>
    26. 		</div>
    27. 	</body>
    28. 	<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    29. 	<script type="text/javascript">
    30. 		let v = new Vue({
    31. 			el:"body>div",
    32. 			data:{
    33. 				name:"",
    34. 				salary:"",
    35. 				job:"",
    36. 				arr:[
    37. 					{name:"坂田",salary:5000,job:"万事屋"},
    38. 					{name:"神乐",salary:3000,job:"万事屋"},
    39. 					{name:"冲田",salary:2333,job:"冲田组"}
    40. 				]
    41. 			},
    42. 			methods:{
    43. 				f(){
    44. 					/* 创建一个新对象，吧用户输入的信息封装到数组中 */
    45. 					let emp = {name:v.name,salary:v.salary,job:v.job}
    46. 					//吧创建的对象添加到数组中
    47. 					v.arr.push(emp);
    48. 				}
    49. 			}
    50. 		})
    51. 	</script>
    52. </html>

    1.2.2个人信息练习

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title></title>
    6. 	</head>
    7. 	<body>
    8. 		<div>
    9. 			<table border="1">
    10. 						<tr>
    11. 							<td>照片:</td>
    12. 							<td><img :src="user.pic" alt=""></td>
    13. 						</tr>
    14. 						<tr>
    15. 							<td>姓名:</td>
    16. 							<td>{{user.name}}</td>
    17. 						</tr>
    18. 						<tr>
    19. 							<td>年龄:</td>
    20. 							<td>{{user.age}}</td>
    21. 						</tr>
    22. 						<tr>
    23. 							<td>好友:</td>
    24. 							<td>
    25. 								<ul>
    26. 									<li v-for="name in user.friends">{{name}}</li>
    27. 								</ul>
    28. 							</td>
    29. 						</tr>
    30. 					</table>
    31. 					<input type="button" value="请求数据" @click="f()">
    32. 		</div>
    33. 	</body>
    34. 	<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    35. 	<script type="text/javascript">
    36. 		let v = new Vue({
    37. 			el:"body>div",
    38. 			data:{
    39. 				user:{pic:"",name:"",age:"",friends:[]}
    40. 			},
    41. 			methods:{
    42. 				f(){
    43. 					let user = {
    44. 							pic:"q.jpg",
    45. 							name:"坂田银时",
    46. 							age:"25",
    47. 							friends:["眼睛男","神乐","定春","洞爷湖"]
    48. 					};
    49. 					v.user = user;
    50. 				}
    51. 			}
    52. 		})
    53. 	</script>
    54. </html>

    2.ElementUI

    官网地址: http://element.eleme.cn

    2.1HelloElementUi

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <!-- import CSS -->
    6.   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    7. </head>
    8. <body>
    9.   <div id="app">
    10. 		
    11.   </div>
    12. </body>
    13.   <!-- import Vue before Element -->
    14.   <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    15.   <!-- import JavaScript -->
    16.   <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    17.   <script>
    18.     let v = new Vue({
    19.       el: '#app',
    20.       data: function() {
    21.         return { //在这里面定义变量
    22. 			
    23. 		}
    24.       }
    25.     })
    26.   </script>
    27. </html>

    注意：后续使用ElementUi需要以上述模板为开始

    2.2ElementUi中的组件

    2.2.1按钮组件

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <!-- import CSS -->
    6.   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    7. </head>
    8. <body>
    9.   <div id="app">
    10. 		<el-row>
    11. 		  <el-button>默认按钮</el-button>
    12. 		  <el-button type="primary">主要按钮</el-button>
    13. 		  <el-button type="success">成功按钮</el-button>
    14. 		  <el-button type="info">信息按钮</el-button>
    15. 		  <el-button type="warning">警告按钮</el-button>
    16. 		  <el-button type="danger">危险按钮</el-button>
    17. 		</el-row>
    18. 		
    19. 		<el-row>
    20. 		  <el-button plain>朴素按钮</el-button>
    21. 		  <el-button type="primary" plain>主要按钮</el-button>
    22. 		  <el-button type="success" plain>成功按钮</el-button>
    23. 		  <el-button type="info" plain>信息按钮</el-button>
    24. 		  <el-button type="warning" plain>警告按钮</el-button>
    25. 		  <el-button type="danger" plain>危险按钮</el-button>
    26. 		</el-row>
    27. 		
    28. 		<el-row>
    29. 		  <el-button round>圆角按钮</el-button>
    30. 		  <el-button type="primary" round>主要按钮</el-button>
    31. 		  <el-button type="success" round>成功按钮</el-button>
    32. 		  <el-button type="info" round>信息按钮</el-button>
    33. 		  <el-button type="warning" round>警告按钮</el-button>
    34. 		  <el-button type="danger" round>危险按钮</el-button>
    35. 		</el-row>
    36. 		
    37. 		<el-row>
    38. 		  <el-button icon="el-icon-search" circle></el-button>
    39. 		  <el-button type="primary" icon="el-icon-edit" circle></el-button>
    40. 		  <el-button type="success" icon="el-icon-check" circle></el-button>
    41. 		  <el-button type="info" icon="el-icon-message" circle></el-button>
    42. 		  <el-button type="warning" icon="el-icon-star-off" circle></el-button>
    43. 		  <el-button type="danger" icon="el-icon-delete" circle></el-button>
    44. 		</el-row>
    45. 		
    46. 		<el-button type="success" plain>查看详情</el-button>
    47. 		
    48. 		
    49. 		
    50. 		<h1>图标</h1>
    51. 		<i class="el-icon-s-opportunity"></i>
    52. 		<i class="el-icon-help"></i>
    53. 		<i class="el-icon-edit"></i>
    54. 		<i class="el-icon-share" style="color: greenyellow;"></i>
    55. 		<i class="el-icon-delete" style="font-size: 30px;"></i>
    56. 		<el-button type="primary" icon="el-icon-search">搜索</el-button>
    57.   </div>
    58. </body>
    59.   <!-- import Vue before Element -->
    60.   <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    61.   <!-- import JavaScript -->
    62.   <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    63.   <script>
    64.     let v = new Vue({
    65.       el: '#app',
    66.       data: function() {
    67.         return { //在这里面定义变量
    68. 			
    69. 		}
    70.       }
    71.     })
    72.   </script>
    73. </html>

    2.2.2图片组件

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <!-- import CSS -->
    6.   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    7. </head>
    8. <body>
    9.   <div id="app">
    10. 	  
    11. 		<div class="demo-image">
    12. 		  <div class="block" v-for="fit in fits" :key="fit">
    13. 		    <span class="demonstration">{{ fit }}</span>
    14. 		    <el-image
    15. 		      style="width: 100px; height: 100px"
    16. 		      :src="url"
    17. 		      :fit="fit"></el-image>
    18. 		  </div>
    19. 		</div>
    20. 		<h1>图片宽高100*100</h1>
    21. 		<!-- 1.图片完整显示并且保证原始宽高比 -->
    22. 		    <el-image
    23. 		      style="width: 100px; height: 100px"
    24. 		      src="a.jpg"
    25. 		      fit="contain">
    26. 			</el-image>
    27. 			<el-image
    28. 			  style="width: 100px; height: 100px"
    29. 			  src="a.jpg"
    30. 			  fit="cover">
    31. 			</el-image>
    32. 			<el-image
    33. 			  style="width: 100px; height: 100px"
    34. 			  src="a.jpg"
    35. 			  fit="fill">
    36. 			</el-image>
    37.   </div>
    38. </body>
    39.   <!-- import Vue before Element -->
    40.   <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    41.   <!-- import JavaScript -->
    42.   <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    43.   <script>
    44.     let v = new Vue({
    45.       el: '#app',
    46.       data: function() {
    47.         return { //在这里面定义变量
    48. 			fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
    49. 			url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    50. 		}
    51.       }
    52.     })
    53.   </script>
    54. </html>

    2.2.3消息提示组件

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <!-- import CSS -->
    6.   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    7. </head>
    8. <body>
    9.   <div id="app">
    10. 		
    11. 		<template>
    12. 		  <el-button :plain="true" @click="open2">成功</el-button>
    13. 		  <el-button :plain="true" @click="open3">警告</el-button>
    14. 		  <el-button :plain="true" @click="open1">消息</el-button>
    15. 		  <el-button :plain="true" @click="open4">错误</el-button>
    16. 		</template>
    17. 		
    18.   </div>
    19. </body>
    20.   <!-- import Vue before Element -->
    21.   <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    22.   <!-- import JavaScript -->
    23.   <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    24.   <script>
    25.     let v = new Vue({
    26.       el: '#app',
    27.       data: function() {
    28.         return { //在这里面定义变量
    29. 			
    30. 		}
    31.       },
    32. 	  methods: {
    33. 	        open1() {
    34. 	          this.$message('这是一条消息提示');
    35. 	        },
    36. 	        open2() {
    37. 	          // this.$message({
    38. 	          //   message: '恭喜你，这是一条成功消息',
    39. 	          //   type: 'success'
    40. 	          // });
    41. 			  v.$message.success("成功消息");
    42. 	        },
    43. 	  
    44. 	        open3() {
    45. 	          this.$message({
    46. 	            message: '警告哦，这是一条警告消息',
    47. 	            type: 'warning'
    48. 	          });
    49. 	        },
    50. 	  
    51. 	        open4() {
    52. 	          this.$message.error('错了哦，这是一条错误消息');
    53. 	        }
    54. 	      }
    55.     })
    56.   </script>
    57. </html>

    2.2.4下拉菜单组件

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <!-- import CSS -->
    6.   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    7.   <style>
    8. 	  .el-dropdown-link {
    9. 	      cursor: pointer;
    10. 	      color: #409EFF;
    11. 	    }
    12. 	    .el-icon-arrow-down {
    13. 	      font-size: 12px;
    14. 	    }
    15.   </style>
    16. </head>
    17. <body>
    18.   <div id="app">
    19. 		
    20. 		<!-- @command给下拉菜单添加点击菜单项的事件，框架内部调用handleCommand方法时
    21. 		 会将菜单项里面的command属性的值传递过去-->
    22. 		<el-dropdown @command="handleCommand">
    23. 		  <span class="el-dropdown-link">
    24. 		    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
    25. 		  </span>
    26. 		  <el-dropdown-menu slot="dropdown">
    27. 		    <el-dropdown-item command="黄金糕">黄金糕</el-dropdown-item>
    28. 		    <el-dropdown-item command="狮子头">狮子头</el-dropdown-item>
    29. 		    <el-dropdown-item command="双皮奶">螺蛳粉</el-dropdown-item>
    30. 		    <el-dropdown-item command="双皮奶" disabled>双皮奶</el-dropdown-item>
    31. 		    <el-dropdown-item command="蚵仔煎" divided>蚵仔煎</el-dropdown-item>
    32. 		  </el-dropdown-menu>
    33. 		</el-dropdown>
    34. 		<h1>显示自己数组中的数据</h1>
    35. 		
    36. 		<el-dropdown @command="handleCommand">
    37. 		  <span class="el-dropdown-link">
    38. 		    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
    39. 		  </span>
    40. 		  <el-dropdown-menu slot="dropdown">
    41. 		    <el-dropdown-item v-for="name in arr" :command="name">{{name}}</el-dropdown-item>
    42. 		  </el-dropdown-menu>
    43. 		</el-dropdown>
    44.   </div>
    45. </body>
    46.   <!-- import Vue before Element -->
    47.   <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    48.   <!-- import JavaScript -->
    49.   <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    50.   <script>
    51.     let v = new Vue({
    52.       el: '#app',
    53.       data: function() {
    54.         return { //在这里面定义变量
    55. 			arr:["刘备","刘逼逼","刘玄德"]
    56. 		}
    57.       },
    58. 	  methods: {
    59. 	        handleCommand(command) {
    60. 	          this.$message.success(command);
    61. 	        }
    62. 	      }
    63.     })
    64.   </script>
    65. </html>

    2.2.5导航菜单组件

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <!-- import CSS -->
    6.   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    7. </head>
    8. <body>
    9.   <div id="app">
    10. 		<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
    11. 		  <el-menu-item index="1">处理中心</el-menu-item>
    12. 		  <el-submenu index="2">
    13. 		    <template slot="title">我的工作台</template>
    14. 		    <el-menu-item index="2-1">选项1</el-menu-item>
    15. 		    <el-menu-item index="2-2">选项2</el-menu-item>
    16. 		    <el-menu-item index="2-3">选项3</el-menu-item>
    17. 		    <el-submenu index="2-4">
    18. 		      <template slot="title">选项4</template>
    19. 		      <el-menu-item index="2-4-1">选项1</el-menu-item>
    20. 		      <el-menu-item index="2-4-2">选项2</el-menu-item>
    21. 		      <el-menu-item index="2-4-3">选项3</el-menu-item>
    22. 		    </el-submenu>
    23. 		  </el-submenu>
    24. 		  <el-menu-item index="3" disabled>消息中心</el-menu-item>
    25. 		  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
    26. 		</el-menu>
    27. 		<div class="line"></div>
    28. 		<el-menu
    29. 		  :default-active="activeIndex2"
    30. 		  class="el-menu-demo"
    31. 		  mode="horizontal"
    32. 		  @select="handleSelect"
    33. 		  background-color="#545c64"
    34. 		  text-color="#fff"
    35. 		  active-text-color="#ffd04b">
    36. 		  <el-menu-item index="1">处理中心</el-menu-item>
    37. 		  <el-submenu index="2">
    38. 		    <template slot="title">我的工作台</template>
    39. 		    <el-menu-item index="2-1">选项1</el-menu-item>
    40. 		    <el-menu-item index="2-2">选项2</el-menu-item>
    41. 		    <el-menu-item index="2-3">选项3</el-menu-item>
    42. 		    <el-submenu index="2-4">
    43. 		      <template slot="title">选项4</template>
    44. 		      <el-menu-item index="2-4-1">选项1</el-menu-item>
    45. 		      <el-menu-item index="2-4-2">选项2</el-menu-item>
    46. 		      <el-menu-item index="2-4-3">选项3</el-menu-item>
    47. 		    </el-submenu>
    48. 		  </el-submenu>
    49. 		  <el-menu-item index="3" disabled>消息中心</el-menu-item>
    50. 		  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
    51. 		</el-menu>
    52. 		<h1>自己的导航菜单</h1>
    53. 		<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
    54. 		  <el-menu-item v-for="(name,i) in arr" :index="i+1+''">{{name}}</el-menu-item>
    55. 		</el-menu>
    56.   </div>
    57. </body>
    58.   <!-- import Vue before Element -->
    59.   <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    60.   <!-- import JavaScript -->
    61.   <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    62.   <script>
    63.     let v = new Vue({
    64.       el: '#app',
    65.       data: function() {
    66.         return { //在这里面定义变量
    67. 			activeIndex: '1',
    68. 			activeIndex2: '1',
    69. 			arr:["首页","免费课","直播课","线上课","精品课"]
    70. 		}
    71.       },
    72. 	   methods: {
    73. 	        handleSelect(key, keyPath) {
    74. 	          console.log(key, keyPath);
    75. 	        }
    76. 	    }
    77.     })
    78.   </script>
    79. </html>

    2.2.6表格组件

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <!-- import CSS -->
    6.   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    7. </head>
    8. <body>
    9.   <div id="app">
    10. 		<template>
    11. 			<!-- data设置显示的数据 -->
    12. 		    <el-table
    13. 		      :data="tableData"
    14. 		      style="width: 100%">
    15. 			  <!-- prop=property属性 ,设置这一列显示的数据-->
    16. 		      <el-table-column
    17. 		        prop="date"
    18. 		        label="日期"
    19. 		        width="180">
    20. 		      </el-table-column>
    21. 		      <el-table-column
    22. 		        prop="name"
    23. 		        label="姓名"
    24. 		        width="180">
    25. 		      </el-table-column>
    26. 		      <el-table-column
    27. 		        prop="address"
    28. 		        label="地址">
    29. 		      </el-table-column>
    30. 		    </el-table>
    31. 		  </template>
    32. 		
    33. 		<h1>员工列表</h1>
    34. 		<template>
    35. 			<!-- data设置显示的数据 -->
    36. 		    <el-table
    37. 		      :data="arr"
    38. 		      style="width: 100%">
    39. 			  <!-- prop=property属性 ,设置这一列显示的数据-->
    40. 		      <el-table-column
    41. 		        prop="name"
    42. 		        label="姓名"
    43. 		        width="180">
    44. 		      </el-table-column>
    45. 		      <el-table-column
    46. 		        prop="salary"
    47. 		        label="工资"
    48. 		        width="180">
    49. 		      </el-table-column>
    50. 		      <el-table-column
    51. 		        prop="job"
    52. 		        label="岗位">
    53. 		      </el-table-column>
    54. 			  <el-table-column label="操作">
    55. 			        <template slot-scope="scope">
    56. 			          <el-button
    57. 			            size="mini"
    58. 			            type="danger"
    59. 			            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
    60. 			        </template>
    61. 			      </el-table-column>
    62. 		    </el-table>
    63. 		  </template>
    64. 		  <h1>女友列表</h1>
    65. 		  <template>
    66. 		  	<!-- data设置显示的数据 -->
    67. 		      <el-table
    68. 		        :data="nvarr"
    69. 		        style="width: 100%">
    70. 		  	  <!-- prop=property属性 ,设置这一列显示的数据-->
    71. 		        <el-table-column
    72. 		          prop="name"
    73. 		          label="姓名"
    74. 		          width="180">
    75. 		        </el-table-column>
    76. 		        <el-table-column
    77. 		          prop="relation"
    78. 		          label="关系"
    79. 		          width="180">
    80. 		        </el-table-column>
    81. 		        <el-table-column
    82. 		          prop="job"
    83. 		          label="工作">
    84. 		        </el-table-column>
    85. 		  	  <el-table-column label="操作">
    86. 		  	        <template slot-scope="scope">
    87. 		  	          <el-button
    88. 		  	            size="mini"
    89. 		  	            type="danger"
    90. 		  	            @click="girlfriendDelete(scope.$index, scope.row)">删除</el-button>
    91. 		  	        </template>
    92. 		  	      </el-table-column>
    93. 		      </el-table>
    94. 		    </template>
    95.   </div>
    96. </body>
    97.   <!-- import Vue before Element -->
    98.   <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    99.   <!-- import JavaScript -->
    100.   <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    101.   <script>
    102.     let v = new Vue({
    103.       el: '#app',
    104.       data: function() {
    105.         return { //在这里面定义变量
    106. 			tableData: [{
    107. 			            date: '2016-05-02',
    108. 			            name: '王小虎',
    109. 			            address: '上海市普陀区金沙江路 1518 弄'
    110. 			          }, {
    111. 			            date: '2016-05-04',
    112. 			            name: '王小虎',
    113. 			            address: '上海市普陀区金沙江路 1517 弄'
    114. 			          }, {
    115. 			            date: '2016-05-01',
    116. 			            name: '王小虎',
    117. 			            address: '上海市普陀区金沙江路 1519 弄'
    118. 			          }, {
    119. 			            date: '2016-05-03',
    120. 			            name: '王小虎',
    121. 			            address: '上海市普陀区金沙江路 1516 弄'
    122. 			          }],
    123. 			arr:[
    124. 				{name:"张三",salary:3000,job:"销售"},
    125. 				{name:"李四",salary:5000,job:"经理"},
    126. 				{name:"王五",salary:100000,job:"老板"}
    127. 				
    128. 				],
    129. 			nvarr:[
    130. 				{name:"拉姆",relation:"老婆1号",job:"女仆"},
    131. 				{name:"雷姆",relation:"老婆2号",job:"女仆"},
    132. 				{name:"艾米利亚",relation:"老婆3号",job:"魔法师"}
    133. 				
    134. 				]	
    135. 		}
    136.       },
    137. 	  methods:{
    138. 		  handleDelete(index, row) {
    139. 		      console.log(index+"员工对象:"+row.name);
    140. 			  v.arr.splice(index,1);
    141. 		  },
    142. 		  girlfriendDelete(index, row) {
    143. 		      console.log(index+"员工对象:"+row.name);
    144. 		  			  v.nvarr.splice(index,1);
    145. 		  }
    146. 	  }
    147.     })
    148.   </script>
    149. </html>

    2.2.7布局组件

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <!-- import CSS -->
    6.   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    7.   <style>
    8. 	  .el-row {
    9. 	      margin-bottom: 20px;
    10. 	      &:last-child {
    11. 	        margin-bottom: 0;
    12. 	      }
    13. 	    }
    14. 	    .el-col {
    15. 	      border-radius: 4px;
    16. 	    }
    17. 	    .bg-purple-dark {
    18. 	      background: #99a9bf;
    19. 	    }
    20. 	    .bg-purple {
    21. 	      background: #d3dce6;
    22. 	    }
    23. 	    .bg-purple-light {
    24. 	      background: #e5e9f2;
    25. 	    }
    26. 	    .grid-content {
    27. 	      border-radius: 4px;
    28. 	      min-height: 36px;
    29. 	    }
    30. 	    .row-bg {
    31. 	      padding: 10px 0;
    32. 	      background-color: #f9fafc;
    33. 	    }
    34.   </style>
    35. </head>
    36. <body>
    37.   <div id="app">
    38. 		<el-row>
    39. 		  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
    40. 		  <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
    41. 		</el-row>
    42. 		<el-row :gutter="20">
    43. 		  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
    44. 		  <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
    45. 		  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
    46. 		</el-row>
    47. 		<div style="width: 1000px;margin: 0 auto;">
    48. 			<el-row>
    49. 			  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    50. 			  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
    51. 			  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    52. 			  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
    53. 			</el-row>
    54. 			
    55. 		</div>
    56. 		<div style="width: 1200px;margin: 0 auto;">
    57. 			<el-row :gutter="30">
    58. 			  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
    59. 			  <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
    60. 			  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
    61. 			</el-row>
    62. 		</div>
    63. 		<el-row>
    64. 			<!-- :offset设置偏移的分栏数量 -->
    65. 		  <el-col :span="20" :offset="4"><div class="grid-content bg-purple"></div></el-col>
    66. 	
    67. 		</el-row>
    68.   </div>
    69. </body>
    70.   <!-- import Vue before Element -->
    71.   <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    72.   <!-- import JavaScript -->
    73.   <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    74.   <script>
    75.     let v = new Vue({
    76.       el: '#app',
    77.       data: function() {
    78.         return { //在这里面定义变量
    79. 			
    80. 		}
    81.       }
    82.     })
    83.   </script>
    84. </html>

    2.2.8布局容器组件

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <!-- import CSS -->
    6.   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    7.   <style>
    8.     .el-header, .el-footer {
    9.       background-color: #B3C0D1;
    10.       color: #333;
    11.       text-align: center;
    12.       line-height: 60px;
    13.     }
    14.     
    15.     .el-aside {
    16.       background-color: #D3DCE6;
    17.       color: #333;
    18.       text-align: center;
    19.       line-height: 200px;
    20.     }
    21.     
    22.     .el-main {
    23.       background-color: #E9EEF3;
    24.       color: #333;
    25.       text-align: center;
    26.       line-height: 160px;
    27.     }
    28.     
    29.     body > .el-container {
    30.       margin-bottom: 40px;
    31.     }
    32.     
    33.     .el-container:nth-child(5) .el-aside,
    34.     .el-container:nth-child(6) .el-aside {
    35.       line-height: 260px;
    36.     }
    37.     
    38.     .el-container:nth-child(7) .el-aside {
    39.       line-height: 320px;
    40.     }
    41.   </style>
    42. </head>
    43. <body>
    44.   <div id="app">
    45. 		<el-container>
    46. 		  <el-header>Header</el-header>
    47. 		  <el-main>Main</el-main>
    48. 		  <el-footer>Footer</el-footer>
    49. 		</el-container>
    50. 		<el-container>
    51. 		  <el-header>Header</el-header>
    52. 		  <el-container>
    53. 		    <el-aside width="200px">Aside</el-aside>
    54. 		    <el-container>
    55. 		      <el-main>Main</el-main>
    56. 		      <el-footer>Footer</el-footer>
    57. 		    </el-container>
    58. 		  </el-container>
    59. 		</el-container>
    60.   </div>
    61. </body>
    62.   <!-- import Vue before Element -->
    63.   <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    64.   <!-- import JavaScript -->
    65.   <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    66.   <script>
    67.     let v = new Vue({
    68.       el: '#app',
    69.       data: function() {
    70.         return { //在这里面定义变量
    71. 			
    72. 		}
    73.       }
    74.     })
    75.   </script>
    76. </html>

    2.2.9分割线组件

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <!-- import CSS -->
    6.   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    7. </head>
    8. <body>
    9.   <div id="app">
    10. 		<template>
    11. 		  <div>
    12. 		    <span>青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪</span>
    13. 		    <el-divider></el-divider>
    14. 		    <span>少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉</span>
    15. 		  </div>
    16. 		</template>
    17. 		<template>
    18. 		  <div>
    19. 		    <span>头上一片晴天，心中一个想念</span>
    20. 		    <el-divider content-position="left">少年包青天</el-divider>
    21. 		    <span>饿了别叫妈, 叫饿了么</span>
    22. 		    <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
    23. 		    <span>为了无法计算的价值</span>
    24. 		    <el-divider content-position="right">阿里云</el-divider>
    25. 		  </div>
    26. 		</template>
    27. 		<template>
    28. 		  <div>
    29. 		    <span>雨纷纷</span>
    30. 		    <el-divider direction="vertical"></el-divider>
    31. 		    <span>旧故里</span>
    32. 		    <el-divider direction="vertical"></el-divider>
    33. 		    <span>草木深</span>
    34. 		  </div>
    35. 		</template>
    36.   </div>
    37. </body>
    38.   <!-- import Vue before Element -->
    39.   <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    40.   <!-- import JavaScript -->
    41.   <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    42.   <script>
    43.     let v = new Vue({
    44.       el: '#app',
    45.       data: function() {
    46.         return { //在这里面定义变量
    47. 			
    48. 		}
    49.       }
    50.     })
    51.   </script>
    52. </html>

    2.2.10卡片组件

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <!-- import CSS -->
    6.   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    7. </head>
    8. <body>
    9.   <div id="app">
    10. 	  <el-card><h1>四大神仙</h1></el-card>
    11. 	  <el-divider></el-divider>
    12. 		<el-row :gutter="20">
    13. 			<el-col :span = "6"><el-card><h1>刘德华</h1></el-card></el-col>
    14. 			<el-col :span = "6"><el-card><h1>张学友</h1></el-card></el-col>
    15. 			<el-col :span = "6"><el-card><h1>郭富城</h1></el-card></el-col>
    16. 			<el-col :span = "6"><el-card><h1>老逼灯</h1></el-card></el-col>
    17. 		</el-row>
    18.   </div>
    19. </body>
    20.   <!-- import Vue before Element -->
    21.   <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    22.   <!-- import JavaScript -->
    23.   <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    24.   <script>
    25.     let v = new Vue({
    26.       el: '#app',
    27.       data: function() {
    28.         return { //在这里面定义变量
    29. 			
    30. 		}
    31.       }
    32.     })
    33.   </script>
    34. </html>

    注意：上述代码都是可以去ElemenUi上面复制的，ElementUi上面的组件还有很多

               可以去自行查看， 官网地址: http://element.eleme.cn

  • 相关阅读:
    计算数组中每个元素的出现次数
    JS-String篇(速记用法大汇总)
    一个C++读取XML的类
    Excel VLOOKUP实用教程之 02 vlookup如何双向查找，两个字段查询数据？（教程含数据excel）
    prometheus基于文件发现及热加载
    计算机学院第五次ACM周赛题解
    JavaScript-手写every原理
    IAP-Bootloader | 基于STM32F407+STM32CubeMX - 通过按钮实现Bootloader程序与APP程序互相切换
    面试突击45：为什么要用读写锁？它有什么优点？
    使用 Java 操作 Redis
  • 原文地址：https://blog.csdn.net/TheNewSystrm/article/details/125606905