Vue.js之遍历输出JavaScript的常见数据类型(v-for)

来源：互联网发布：java投票系统源码编辑：程序博客网时间：2024/06/05 08:56

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数据($index,$key)

3.1 JavaScript代码

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

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>

1 0