vue基础之data存储数据及v-for循环用法示例

2020-11-27 来源：爱go旅游网

v-for="name in json"
{{value}} {{index}} {{index}} {{key}}

v-for="(k,v) in json"
{{k}} {{v}} {{index}} {{index}} {{key}}

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>www.gxlcms.com vue v-for循环</title>
 <style>
 </style>
 <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
 <script>
 window.onload=function(){
 new Vue({
 el:'#box',
 data:{
 arr:['apple','banana','orange','pear'],
 json:{a:'apple',b:'banana',c:'orange'}
 }
 });
 };
 </script>
</head>
<body>
 <div id="box">
 <ul>
 <li v-for="value in arr">
 {{value}} {{$index}}
 </li>
 </ul>
 <hr>
 <ul>
 <li v-for="value in json">
 {{value}} {{$index}} {{$key}}
 </li>
 </ul>
 <hr>
 <ul>
 <li v-for="(k,v) in json">
 {{k}} {{v}} {{$index}} {{$key}}
 </li>
 </ul>
 </div>
</body>
</html>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。

显示全文

全部栏目

vue基础之data存储数据及v-for循环用法示例