vue中的列表(数组)渲染例子
2018-07-10 本文已影响1人
程序员同行者
vue中的列表(数组)渲染例子
<!DOCTYPE html>
<html>
<head>
<title>vue中的列表渲染</title>
<script src="./vue.js"></script>
</head>
<body>
<!-- // 循环数组 -->
<div id="app">
<!-- 1. -->
<!-- <div v-for="(item,index) of list"
:key="item.id">
{{item.text}}----{{index}}
</div> -->
<!-- 2. //使用模板占位符<template></template> -->
<template v-for="(item, index) of list"
>
<div>
{{ item.text }} ---- {{ index }}
</div>
<span>
{{ item.text }}
</span>
</template>
</div>
<!-- // 循环对象 -->
<div id='app-1'>
<div v-for="(item, key, index) of userInfo"
:key="item.index">
{{item}} --- {{key}}----{{index}}
</div>
</div>
<script>
//数组操作方法 push pop shift unshift splice sort reverse
// 修改数组的内容并响应式显示有三种方法
//1. set方法,(全局set，实例set)
// Vue.set(vm.list,1,{id:'11',text:'pwd'})
// vm.$set(vm.list,1,{id:'11',text:'pwd')
//2. 直接改数组引用
// // vm.list = {
// id: '1',
// text: 'hello'
// },
// {
// id: '2',
// text: 'world'
// },
// {
// id: '3',
// text: 'dell'
// }
//3. 调用数组的变异方法如splice
// vm.list.splice(0,0,{id:'1',text:'hello111'})
var vm = new Vue({
el: '#app',
data: {
list: [
{
id: '1',
text: 'hello'
},
{
id: '2',
text: 'world'
},
{
id: '3',
text: 'dell'
}
]
}
})
//修改对象内容并响应式显示有两种方法
//1. 直接修改对象引用
// vm1.userInfo = {name: "Dell",age: "28",gender: "male",salary: "secret",address:"beijing"}
//2. set方法,(全局set，实例set)
// Vue.set(vm1.userInfo,"address", "Dell111")
// vm1.$set(vm1.userInfo,"address", "Dell111")
var vm1 = new Vue({
el: '#app-1',
data: {
userInfo: {
name: "Dell",
age: "28",
gender: "male",
salary: "secret"
}
}
})
</script>
</body>
</html>
