<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<span>v-for 列表渲染 语法 v-for ="(item,index) in items"</span>
<div id="app1">
<table border="1 solid" colspa="0" cellspacing="0">
<tr>
<th>文章标题</th>
<th>分类</th>
<th>发表时间</th>
<th>状态</th>
<th>操作</th>
</tr>
<tr>
<td>标题1</td>
<td>分类1</td>
<td>2000-01-01</td>
<td>已发布</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>标题2</td>
<td>分类2</td>
<td>2000-01-01</td>
<td>已发布</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>标题3</td>
<td>分类3</td>
<td>2000-01-01</td>
<td>已发布</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
</table>
</div>
<span> 使用v-for,循环遍历</span>
<div id="app">
<table border="1 solid" colspa="0" cellspacing="0">
<tr>
<th>文章标题</th>
<th>分类</th>
<th>发表时间</th>
<th>状态</th>
<th>操作</th>
</tr>
<tr v-for ="(article,index) in articleList">
<th>{{article.title}}</th>
<th>{{article.category}}</th>
<th>{{article.time}}</th>
<th>{{article.state}}</th>
</tr>
</table>
</div>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data() {
return {
//定义数据
articleList: [{
title: "医疗反腐绝非砍医护收入",
category: "时事",
time: "2023-09-5",
state: "已发布"
},
{
title: "中国男篮缘何一败涂地？",
category: "篮球",
time: "2023-09-5",
state: "草稿"
},
{
title: "华山景区已受大风影响阵风达7-8级，未来24小时将持续",
category: "旅游",
time: "2023-09-5",
state: "已发布"
}]
}
}
}).mount('#app')
</script>
</body>
</html>
vue- 基础使用 ，v-for、v-bind、v-if/v-else、v-show、v-model、.v-on
需积分: 0 103 浏览量
2024-03-08
22:22:58
上传
评论
收藏 7KB ZIP 举报
big-c-web.zip （11个子文件） 
big-c-web 
method.js 239B
01.快速入门.html 560B 06.v-model.html 1KB 04.v-if.v-show.html 1KB 05.v-on.html 1KB 02.v-for.html 3KB 03.v-bind.html 733B message.html 535B 07.生命周期.html 671B 08.ajax请求.html 2KB 模板.html 627B资源评论
