您的位置：首页 > 产品设计 > UI/UE

vue2.0 之列表渲染-v-for

2017-06-24 22:46 639 查看

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>

点击按钮前

点击按钮后

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航