1、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>