vuejdjs对象循环

清疚 2022-05-25 13:45 166阅读 0赞

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>列表对象循环</title>  
  
</head>  
<body>  
<div id="app">  
<div v-for="(item,key,index) of userInfo">  
\{ \{item\}\} -- \{ \{key\}\} --\{ \{index\}\}  
  
</div>  
  
</div>  
<script type="text/javascript" src="js/vue.js" ></script>  
<script>  
  
  
var vm= new Vue(\{  
el:"\#app",  
data:\{  
userInfo:\{  
name:"dell",  
age:"28",  
gender:"male",  
salary:"secret"  
\}  
\}  
  
\})  
  
//在div里在添加一项语法 在控制台 vm.list.push(\{id:"04",text:"sfh"\})  
//如果这么写vm.list\[3\] = \{id:"04",text:"sth"\}，不会渲染出来，在sctocs里会出现代码  
</script>  
</body>

</html>

//改变一项的话在控制台输入  
//vm.userInfo.name="dell lee"  
添加一项的话,在在控制台输入  
//vm.userInfo.address="beijgn"

![20180515185531677][]

渲染不出来

要渲染出来的话在控制台输入

vm.userInfo =\{  
name:"dell",  
age:"28",  
gender:"male",  
salary:"secret",  
address:"beijgn"

\}

![20180515191956931][]

另外一种添加循环项是第二种方法是通过Vue.set方法，数据变页面跟着变

//在控制台输入Vue.set(vm.userInfo,"address","beingjing")

![20180515193039709][]

通过实例方法添加循环项

vm.$set(vm.userInfo,"address","beijing")

![2018051519340019][]

[20180515185531677]: /images/20220525/386ced0a7bd947438c2c02f6377349d0.png
[20180515191956931]: /images/20220525/ee5a8aaece7c4b0488827a786ac12dc0.png
[20180515193039709]: /images/20220525/afd6781314ba49fb9b02aaebdc5dce69.png
[2018051519340019]: /images/20220525/fcfed62c53b74aba948360bb0beb7063.png

发表评论取消回复

表情：

评论列表（有 0 条评论，166人围观）

还没有评论，来说两句吧...

相关阅读

相关遍历数组中嵌套的对象，循环嵌套循环

遍历数组中嵌套的对象，循环嵌套循环 for(var i=0;i<this.tableOption.column.length;i++){//循环数组 ...

阳光穿透心脏的1/2处/ 2024年04月18日 15:42/ 0 赞/ 75 阅读

相关循环一个map对象_spring是如何解决循环依赖问题

循环依赖一直都是spring一个老生常谈的问题，为了加深影响特此整理了一下spring是如何解决循环依赖的。什么是循环依赖？ java中循环依赖分为两类，一种是通过构造

雨点打透心脏的1/2处/ 2023年01月06日 11:56/ 0 赞/ 128 阅读

相关 vuejdjs对象循环

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>列表对象循环</title>

清疚/ 2022年05月25日 13:45/ 0 赞/ 167 阅读

相关使用js动态循环创建对象

$.each($('input:checkbox:checked'),function(index){

偏执的太偏执、/ 2022年05月19日 14:20/ 0 赞/ 547 阅读

相关 js 对象循环

场景分析解决场景对对象进行循环操作是个很常见的场景分析不同于arr, ob

ゞ浴缸里的玫瑰/ 2022年05月19日 11:14/ 0 赞/ 168 阅读

相关 new对象在for循环内与循环外的区分

遇到的问题：excle导入文件时java代码解析入数据库发现数据是同一条。 Excle导入模板 ![20190123134654837.png][] 数据库查询发现都是第

喜欢ヅ旅行/ 2022年04月23日 02:50/ 0 赞/ 346 阅读

相关 v-for 循环对象数组

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

小灰灰/ 2022年04月18日 06:38/ 0 赞/ 179 阅读

相关 angularJS(八)angularJsDemo之循环对象

需求：angularJs之循环对象 ![20190405182700823.png][] 实现如下 ![watermark_type_ZmFuZ3poZW5

约定不等于承诺〃/ 2022年02月23日 01:14/ 0 赞/ 204 阅读

相关 vue的数组循环和对象循环

数组循环：  <div id="app"> <ol> <li v-for="(ite

今天药忘吃喽~/ 2021年12月21日 10:03/ 0 赞/ 363 阅读

相关 for循环进行对象去重

重点是把对象转化成字符串再进行去重 var arr=[ { a:1,b:2}, { a:1,b:2}, { a:2,b

古城微笑少年丶/ 2021年07月27日 00:52/ 0 赞/ 479 阅读