Vue v-for操作对象与数值
作者： thtomatic 分类： Vue 评论: [ 0 ] 条 浏览: [ 749 ] 次
代码:
<!doctype html>
<html lang="en">
<head id="head">
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<title>{{title}} </title>
</head>
<body>
<div id="ask"><!--vue不能控制body和html的标签-->
<!--vue操作对象-->
<table border="1">
<tr>
<th>序号</th>
<th>属性</th>
<th>值</th>
</tr>
<tbody>
<tr v-for="(v,k,i) in list">
<td>{{i}}</td>
<td>{{k}}</td>
<td>{{v}}</td>
</tr>
</tbody>
</table>
<hr>
<!--vue操作数值-->
<table border="1" width="100%">
<tr v-for="v in 20">
<td>{{v}}</td>
</tr>
</tbody>
</table>
</div>
<script>
var vue = function (options){new Vue(options)};
vue({
el:'#head',
data:{
title:'Vue v-for操作对象与数值'
}
});
var app = vue({
//element
el:'#ask',
data:{
list:{
title:'简单记录',
url:'ask.mykeji.net',
domain:'mykeji.net'
}
}
});
</script>
</body>
</html>
效果:
以下为全部代码：
版权所有：《thtomatic》 => 《Vue v-for操作对象与数值》
本文地址：https://ask.mykeji.net/Vue/240.html
除非注明，文章均为 《简单记录》 原创，欢迎转载！转载请注明本文地址，谢谢。
发表评论：