vue中一个data中存放多条信息

开始是这样的
window.onload = function(){
				var c= new Vue({
					el:'#box',
					data:{
						msg:'第一个Vue实例'
					}
				});
			}; 
在调用的时候使用
{{msg}}
就可以调用出来内容
但如果我们想存放多条信息时,只需要
window.onload = function(){
				var c= new Vue({
					el:'#box',
					data:{
						msg:'第一个Vue实例',
						msg2:'这是另外的内容'
					}
				});
			};
在调用的时候使用
{{msg}}{{msg2}}就可以调用内容。

展示数组内容

如我们定义了一个数组
window.onload = function(){
				var c= new Vue({
					el:'#box',
					data:{
						msg:'第一个Vue实例',
						msg2:'这是另外的内容',
						arr:['apple','banana','orange','pear']
					}
				});
			};
我们想要显示的时候需要用循环
<li v-for="value in arr">
				{{value}}
			</li>
想要将循环的下标也显示,则使用下面的
<li v-for="(value,index) in arr">
				{{value}} - {{index}}
			</li>
展示json内容
我们定义了一个json
window.onload = function(){
				var c= new Vue({
					el:'#box',
					data:{
						msg:'第一个Vue实例',
						msg2:'这是另外的内容',
						arr:['apple','banana','orange','pear'],
						json:{a:'red',b:'green'}
					}
				});
			};

和上面的数组展示一模一样,没有任何区别,如下
<li v-for="(value,index) in json">
				{{value}} - {{index}}
			</li>

评论

大侠名号:   验证码: 点击我更换图片  

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND