摘要：
V-用于阵列渲染应用程序。vue code＜template＞＜div＞＜ul＞＜liv for＝“itemlist”＞｛｛item.name｝｝-｛item.price｝｝｝＜ul＞
v-for 数组渲染
App.vue代码
<template>
<div>
<ul>
<li v-for="item in list"> {{ item.name }} - {{ item.price }}</li>
</ul>
<ul>
<li v-for="item in list" v-text="item.name + '-' + item.price"></li>
</ul>
<ul>
<li v-for="(item, index) in list"> {{ index }} - {{ item.name }} - {{ item.price }}</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
list: [
{
name: 'apple 7S',
price: 6188
},
{
name: 'huawei P10',
price: 4288
},
{
name: 'mi6',
price: 2999
}
]
}
}
}
</script>
<style>
html {
height: 100%;
}
</style>
页面效果
v-for 对象渲染
App.vue代码
<template>
<div>
<ul>
<li v-for="value in objlist"> {{ value }}</li>
</ul>
<ul>
<li v-for="(key, value) in objlist"> {{ key + ':' + value }}</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
objlist: {
name: 'apple 7S',
price: 6188,
color: 'red',
size: 6.0
}
}
}
}
</script>
<style>
html {
height: 100%;
}
</style>页面显示
v-for 子组件渲染
创建./components/hello.vue文件
<template>
<div>
{{ hello }}
</div>
</template>
<script>
export default {
data () {
return {
hello: 'i am component hello'
}
}
}
</script>
<style scoped>/**/
h1 {
height: 100px;
}
</style>
App.vue代码
<template>
<div>
<componenthello v-for="(key, value) in objlist"></componenthello>
</div>
</template>
<script>
import componenthello from './components/hello'
export default {
components: {
componenthello
},
data () {
return {
objlist: {
name: 'apple 7S',
price: 6188,
color: 'red',
size: 6.0
}
}
}
}
</script>
<style>
html {
height: 100%;
}
</style>
页面显示
列表数据的同步更新
案例一：
<template>
<div>
<ul>
<li v-for="item in list"> {{ item.name }} - {{ item.price }}</li>
</ul>
<button v-on:click="addItem">addItem</button>
</div>
</template>
<script>
export default {
data () {
return {
list: [
{
name: 'apple 7S',
price: 6188
},
{
name: 'huawei P10',
price: 4288
},
{
name: 'mi6',
price: 2999
}
]
}
},
methods: {
addItem () {
this.list.push({
name: 'meizu',
price: 2499
})
}
}
}
</script>
<style>
html {
height: 100%;
}
</style>
案例二
<template>
<div>
<ul>
<li v-for="item in list"> {{ item.name }} - {{ item.price }}</li>
</ul>
<button v-on:click="addItem">addItem</button>
</div>
</template>
<script>
import Vue from 'vue'
export default {
data () {
return {
list: [
{
name: 'apple 7S',
price: 6188
},
{
name: 'huawei P10',
price: 4288
},
{
name: 'mi6',
price: 2999
}
]
}
},
methods: {
addItem () {
Vue.set(this.list, 1, {
name: 'meizu',
price: 2499
})
}
}
}
</script>
<style>
html {
height: 100%;
}
</style>
点击按钮前
点击按钮后
