1、Java/"target="_blank">JavaScript 数据类型在 vue.js 中的遍历输出。以便于在 html 页面上方便的显示数据的类型。
2、简单的遍历输出代码
2.1 JavaScript 的代码
- <script type="text/javascript">
- window.onload = function() {
- vm = new vue({
- el: '#app',
- data: {
- iMsg: 10,
- sMsg: 'Hello World',
- bMsg: true,
- arrMsg: ['apple', 'orage', 'pear'],
- jsonMsg: {
- a: 'apple',
- b: 'orage',
- c: 'pear'
- }
- }
- });
- }
- </script>
2.2 html 的页面代码
- <div id="app" class="container">
- <br />
- 整数类型的输出: {{iMsg}}
- <br />
- 字符串类型的输出: {{sMsg}}
- <br />
- 布尔类型的输出: {{bMsg}}
- <br />
- 数组类型的输出: {{arrMsg}}
- <br />
- json类型的输出: {{jsonMsg}}
- <br />
- </div>
2.3 数据的遍历输出
3、使用 v-for 指令,遍历数组和 JSON 数据。
3.2 Html 页面代码
- <div id="app" class="container">
- <hr />
- 使用 v-for指令来输出数组和json类型的数据
- <br />
- <hr />
- 数组的输出
- <ul>
- <li v-for=" value in arrMsg">
- 数组的数据 :{{value}} , 内置变量数组下标:{{$index}}
- </li>
- </ul>
- <hr />
- json数据的输出----获取key和value方式一
- <li v-for=" (key,value) in jsonMsg">
- json的key的内容 :{{key}} , json的value的内容:{{value}} , 下标index的内容:{{$index}}
- </li>
- <hr />
- json数据的输出----获取key和value方式二(内置变量$key)
- <li v-for=" value in jsonMsg">
- json的key的内容 :{{$key}} , json的value的内容:{{value}} , 下标index的内容:{{$index}}
- </li>
- <hr />
- </div>
3.3 结果
4、完整的代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <link rel="stylesheet" href="../CSS/bootstrap.min.css" />
- <script type="text/javascript" src="../js/vue-1.0.21.js">
- </script>
- <script type="text/javascript">
- window.onload = function() {
- vm = new Vue({
- el: '#app',
- data: {
- arrMsg: ['apple', 'orage', 'pear'],
- jsonMsg: {
- a: 'apple',
- b: 'orage',
- c: 'pear'
- }
- }
- });
- }
- </script>
- </head>
- <body>
- <div id="app" class="container">
- <hr />
- 使用 v-for指令来输出数组和json类型的数据
- <br />
- <hr />
- 数组的输出
- <ul>
- <li v-for=" value in arrMsg">
- 数组的数据 :{{value}} , 内置变量数组下标:{{$index}}
- </li>
- </ul>
- <hr />
- json数据的输出----获取key和value方式一
- <li v-for=" (key,value) in jsonMsg">
- json的key的内容 :{{key}} , json的value的内容:{{value}} , 下标index的内容:{{$index}}
- </li>
- <hr />
- json数据的输出----获取key和value方式二(内置变量$key)
- <li v-for=" value in jsonMsg">
- json的key的内容 :{{$key}} , json的value的内容:{{value}} , 下标index的内容:{{$index}}
- </li>
- <hr />
- </div>
- </body>
- </html>
就爱阅读 www.92to.com 网友整理上传, 为您提供最全的知识大全, 期待您的分享,转载请注明出处。
来源: http://www.92to.com/bangong/2017/03-07/18276962.html