三、vue列表渲染

最新推荐文章于 2023-06-10 23:28:04 发布

努力成为科技博

最新推荐文章于 2023-06-10 23:28:04 发布

阅读量113

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_33575051/article/details/107036760

版权

本文探讨了Vue.js中如何有效地更新数组数据以实现列表渲染的动态效果，讲解了Vue的数组响应式原理及常见的更新数组的方法。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h3>明星列表</h3>
			<ul>
				<li v-for="item in stars"> 
				{
   {
   item}}
				</li>
			</ul>
			<h3>学生列表</h3>
			<ul>
				<li v-for="item in students">
					<h4>{
   {
   item.studentName}}</h4>
					<p>年龄：{
   {
   item.age}}---学校：{
   {
   item.school}}</p>
				</li>
			</ul>
			<h3>学生列表(带索引值