vue再读20-表格案例--处理无数据的时候的渲染
  KRe60ogUm4le 18天前 73 0
<!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>
<!-- 数据渲染界面 -->
<!-- 绑定表单元素 -->
<div id="abc">
<div class="add">
<input type="text">
<input type="button" value="添加">
</div>
<div class="add">
<input type="text" placeholder="请输入你想输入的名称">
</div>
<div>

<table class="tb">
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创立时间</th>
<th>操作</th>
</tr>
<tr v-for="(v,i) in list">
<td>{{i+1}}</td>
<td>{{}}</td>
<td>{{v.date}}</td>

<td>
<a href=删除</a>
</td>

</tr>
<tr v-if="list.length===0">
<td colspan="4">没有品牌数据</td>
</tr>
</table>
</div>
</div>
<script src="./js/vue.js"></script>
<script>
var list = [{
name: 'TCL',
date: new Date()
}, {
name: 'xx00',
date: new Date()
}, {
name: 'TCL',
date: new Date()
},

]

var vm = new Vue({
//v-on里面的methods方法
el: '#abc',
//模板ajax返回的数据
data: {
msg: '我是歌谣',
//等同于list:list
list
},
methods: {

}
})
</script>
<!-- 列表渲染 -->
<!-- 1渲染数组 -->
<!-- 2c处理无数据的时候 -->
</body>

</html>

vue再读20-表格案例--处理无数据的时候的渲染

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 18天前 0

暂无评论

KRe60ogUm4le
最新推荐 更多

2024-05-31