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

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>

转载于:https://www.cnblogs.com/zhanghuiyun/p/6225709.html

Vue - 在v-repeat中使用计算属性相关推荐

VUE学习一：初识VUE、指令、动态绑定、计算属性
文章目录导言一.01-初体验 1. ch01_helloworld.html 2. ==v-for指令==:ch02_vue列表展示_v-for.html 3. ==v-on指令==:ch03.1 ...
vue 计算属性_lt;Vue 源码笔记系列6gt;计算属性 computed 的实现
1. 前言原文发布在语雀: <Vue 源码笔记系列6>计算属性 computed 的实现 · 语雀www.yuque.com 上一章我们已经学习过 watch,这一章就来看一下计算属性 ...
Vue3学习之第三节：setup()中使用计算属性
vue2的方式写computed: 代码片段: data() {return {num1: 0,num2: 0,};},computed: {result() {return parseInt(thi ...
css中会计算的属性,css3中样式计算属性calc()的使用和总结
calc的介绍在css3样式中有一个类似与函数的计算属性calc(),它主要用于指定元素的长度,无论是border.margin.pading.font-size和width等属性都可以使用calc ...
React中的“计算属性”
React中的"计算属性" 相信许多学习过vue的小伙伴对计算属性都不陌生吧.计算属性能帮我们数据进行一些计算操作,计算属性是依赖于data里面的数据的,在vue中只要计算属性依赖 ...
vue监听字符串长度_vue中的计算属性和侦听器
计算属性概念模板内的候通现端数是制这.效合应近环大过这业据的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护在重说道.础过学开概码数项遍间里哦行览屏屏 ...
五十八、Vue中的计算属性，方法和侦听器
@Author:Runsen @Date:2020/10/15 本篇是水篇,记录前端的学习,争取早日拿到前端offer 计算属性,方法和侦听器所以,对于任何复杂逻辑,你都应当使用计算属性.(官方原话 ...
vue 中 computed 计算属性的用法
计算属性实质就是一个方法,只不过在使用的时候只把方法名称作为属性使用,不需要加(),而不是当做方法使用. 只有计算属性的方法内部所用到的任何data中的数据发生变化,就会立刻重新计算这个计算属性的值. ...
Vue中computed(计算属性)、methods、watch的区别
初学vue,阅读api后,发现Vue提供了多种逻辑处理的方法,单纯的方法methods,computed(计算属性)以及watch等,充分理解这三者的区别,才能写出更加健壮的Vue代码. 1.meth ...

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

Vue - 在v-repeat中使用计算属性相关推荐

最新文章

热门文章