<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中列表渲染</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<!--<template v-for="(item,index) of list"-->
<!--:key="item.id">-->
<!--<div> <!–使用key值提高查询效率 template模板占位符，并不渲染在页面上–>-->
<!--{{item.text}} ---{{index}}-->
<!--</div>-->
<!--<span>-->
<!--{{item.text}}-->
<!--</span>-->
<!--</template>-->
<div v-for="(item,key,index) of userInfo">
{{item}}---{{key}}---{{index}}
</div> <!--对对象进行循环-->
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
userInfo:{
name:‘alex‘,
age:‘27‘,
gender:‘male‘,
salary:‘secret‘
}
// list:[
// {id:‘001‘,text:‘hello‘},
// {id:‘002‘,text:‘alex‘},
// {id:‘003‘,text:‘hello‘}
// ]
}
})
</script>
</body>
</html>
<!--
当尝试修改数组内容的时候，不能直接通过下标的形式改变数组，只能通过vue提供的变异方法才能这样做
一共提供7中变异方法 push pop shift unshift splice sort reverse
方法二：改变引用；直接改变list -> vm.list =[{}] 让他指向另外的地址 同理针对对象也可以改变引用改数据
-->
原文地址：https://www.cnblogs.com/xuyxbiubiu/p/9967957.html
时间： 2024-08-29 03:03:08