ホームページ > 記事 > ウェブフロントエンド > Vue.jsリストレンダリングv-for配列オブジェクトサブコンポーネント
这次给大家带来Vue.js的列表渲染 v-for 数组 对象 子组件,使用Vue.js的列表渲染 v-for 数组 对象 子组件的注意事项有哪些,下面就是实战案例,一起来看一下。
v-for(数组)
<template> <p id="myapp"> <!--普通--> <ul> <li v-for="item in list"> {{item.name}} - {{item.price}} </li> </ul> <hr> <!--v-text--> <ul> <li v-for="item in list" v-text="item.name + ' - ' + item.price"></li> </ul> <hr> <!--带序号 并且给奇数行添加一个class=add--> <ul> <li v-for="(item,index) in list" :class="{add:index % 2}"> {{item.name}} - {{item.price}} - {{index}} </li> </ul> </p></template><script> export default { data: function () { return { list: [ { name: 'apple', price: 34 }, { name: 'banana', price: 56 } ] } } }</script>
执行结果:
v-for(对象) 获取key - value
<template> <p id="myapp"> <!--v-for 对象--> <!--只获取value--> <ul> <li v-for="value in objList"> {{value}} </li> </ul> <!--获取key -value--> <ul> <li v-for="(value, key) in objList"> {{key}} - {{value}} </li> </ul> </p></template><script> export default { data: function () { return { objList: { name: 'apple', price: 34, color: 'red', weight: 14 } } } }</script>
执行结果:
v-for(子组件)
先创建一个a组件
代码a.vue代码如下:
<template> <p class="hello"> {{ hello }} </p></template><script> export default { data () { return { hello: 'I am componnet a' } } }</script>
在MyApp.vue中调用
<template> <p id="myapp"> <componentA v-for="(value, key) in objList"></componentA> </p></template><script> import componentA from './components/a.vue' export default {// 注册组件 components: {componentA}, data: function () { return { objList: { name: 'apple', price: 34, color: 'red', weight: 14 } } } }</script>
执行结果:
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上がVue.jsリストレンダリングv-for配列オブジェクトサブコンポーネントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。