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

来源：动视网责编：小采时间：2020-11-27 22:00:10

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

vue基础之data存储数据及v-for循环用法示例:本文实例讲述了vue data存储数据及v-for循环用法。分享给大家供大家参考，具体如下： vue data里面存储数据 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title&

推荐度：

点击下载本文 文档为doc格式

导读vue基础之data存储数据及v-for循环用法示例:本文实例讲述了vue data存储数据及v-for循环用法。分享给大家供大家参考，具体如下： vue data里面存储数据 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title&

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循环用法示例

推荐度：

点击下载本文 文档为doc格式

标签： VUE 用法 data

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐