Vue框架之条件与循环的使用

最新推荐文章于 2021-08-25 14:38:58 发布

练过几年代码，有备而来

最新推荐文章于 2021-08-25 14:38:58 发布

阅读量138

点赞数

分类专栏： web前端开发文章标签： vue.js css html 前端

本文链接：https://blog.csdn.net/zhiqingxue/article/details/115730424

版权

Vue.js 初学者表格渲染 v-for 数据绑定

关键词由CSDN通过智能技术生成

web前端开发专栏收录该内容

19 篇文章 3 订阅

订阅专栏

如果是初学者的话，这里先给你一个基础知识的框图，可以了解一下下面代码的由来。
也可以选择我这个链接Vue条件与循环跳转到Vue官网进行学习。

上面是Vue的一个简单案例，不要急，进阶版来了，通过这个框架应用到你的表格创建里面，非常省事哦。

运行结果:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>123</title>
		<script src="js/vue2.6.min.js"></script>
	</head>
	<body>
		<!--案例一-->
		<div id="domain1">
			<h1>前端行</h1>
		     telenum:<span class="telenum">{{ telenum }}</span><br />
		     address:<span class="address">{{ address }}</span>
		</div>
		<script>
			var telenum='155144133122'
			var address='四海为家'
			var app=new Vue({
				el:'#domain1',
				data:{
					telenum:telenum,
					address:address
				}
			})
		</script>
		<!-- 这个案例能够帮助简单理解一下Vue渲染Dom的基本操作，是为看懂案例二做准备工作的。
		el（element）
		data：（数据的初始化或者更新导入）
		应用的时候如果复制了全部代码，一定要记得把js路径改成自己的，而且也要自己下载vue框架的js。 -->
		
		<br /><br />
		
		<!--案列二-->
		<div id="domain2">
			<table border="1px">
				<!-- thead，tbody，tfoot标签是表格css的基础哦，巨实用，详细的可以看同一专栏的表格css之thead专题 -->
				<thead class="表头">
					<tr>
					<th>班级</th>
					<th>姓名</th>
					<th>学号</th>
				    </tr>
				</thead>
				<tbody class="表数据">
					<tr v-for="stu in stus">         <!-- （循环v-for） -->
						<td>{{stu.class}}</td>
						<td>{{stu.name}}</td>
						<td>{{stu.num}}</td>
					</tr>
				</tbody>
			</table>
		</div>
		<style>
				
			.表头{
				color: aquamarine;
			}
			
			.表数据{
				color: cornflowerblue;
			}
		</style>
		<script>
			var json='[{"class":"B19531","name":"甲","num":"20194054221"},{"class":"B19531","name":"乙","num":"20194054222"},{"class":"B19532","name":"丙","num":"20194054223"},{"class":"B19533","name":"丁","num":"20194054224"},{"class":"B19533","name":"憨憨","num":"20194054225"}]'
			//注意json的书写格式，都是键值对的形式，而且双引号不能省略。
			var app=new Vue({
				el:'#domain2',
				data:{
					stus:eval(json)                  // eval可以用来分解json那样的字符串类型
				}
			})
		</script>
	</body>
</html>

主要注释可见代码：
继续敲黑板的是：
想用vue框架，请记得务必去下载其js文件
应该官网可以下载到，比较懒的像我一样的童鞋也可以直接跳这个链接Vue的js文件下载，我这里已经将上传资源设置为了免费哈，只为提供一个方便。

表格css三个t的使用看这里:表格css的简单应用

练过几年代码，有备而来

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue框架之条件与循环的使用

如果是初学者的话，这里先给你一个基础知识的框图，可以了解一下下面代码的由来。也可以选择我这个链接Vue条件与循环跳转到Vue官网进行学习。上面是Vue的一个简单案例，不要急，进阶版来了，通过这个框架应用到你的表格创建里面，非常省事哦。运行结果:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>123</title> <script
复制链接

扫一扫