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

Vue - 在v-repeat中使用计算属性

2016-12-27 14:15 661 查看
1、从后端获取JSON数据集合后,对单条数据应用计算属性,在Vue.js 0.12版本之前可以在v-repeat所在元素上使用v-component指令

在Vue.js 0.12版本之后使用自定义元素组件实现v-repeat中使用计算属性

1 <div id="items">
2     <my-item v-repeat="items" inline-template>
3         <button>{{fulltext}}</button>
4     </my-item>
5 </div>
6
7 <script type="text/javascript">
8     var items = [
9         {number : 1,text : 'one'},
10         {number : 2,text : 'two'}
11     ]
12
13     var vue = new Vue({
14         el : '#items',
15
16         data : {items : items},
17
18         component : {
19             'my-item' : {
20                 replace : true ,
21                 computed : {
22                     fulltext : function(){
23                         return 'item' + this.text
24                     }
25                 }
26             }
27         }
28     })
29 </script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: