精华内容
下载资源
问答
  • Vue 计算属性用法笔记

    2018-11-28 22:21:48
    计算属性 vs 方法 a.计算属性是基于它的依赖进行更新 只有在相关依赖发生改变时才能进行更新 b.计算属性为缓存,依赖不变,多次访问方法结果为之前缓存结果,不会多次执行 计算属性必须依赖对象用 有所依赖才有存在...

    计算属性 vs 方法

    a.计算属性是基于它的依赖进行更新 只有在相关依赖发生改变时才能进行更新
    b.计算属性为缓存,依赖不变,多次访问方法结果为之前缓存结果,不会多次执行

    计算属性必须依赖对象用 有所依赖才有存在意义

    get和set

    计算属性只能通过自己的get函数获得值 默认为get函数 不能用外部的赋值为无效
    若要用外部改变计算属性 需通过设置set函数来改变他的依赖 使其自己的get函数获得我们想要的结果

    话不多说 直接上代码

    
    		<div class="app" v-if="seen">
    			{{msg1}}
    			<h2>{{reverseMsg}}</h2>
    			<button @click='change'>修改msg值 bye world</button>
    			<h2>{{computedGetNum}}</h2>
    			
    			<button @click='changeNum'>改变num 传值给计算属性</button>
    			<button onclick="fn()">测试num 普通的方法</button>
    		</div>
    
    
    		<script>
    			var vm = new Vue({
    				el: '.app',
    				data: {
    					msg1: 'Hello world',
    					seen: true,
    					num:1
    				},
    				computed:{ // 计算属性可以包含逻辑操作 同时计算属性依赖于msg 与方法区别在于被依赖改变且只执行一次
    					reverseMsg: function() {
    						return this.msg1.split('').reverse().join();
    					},
    					computedGetNum:{
    						get:function(){
    						// 一秒执行一次 但只返回return 时间输出语句只执行一次
    						console.log("Computed" + new Date());
    						return this.num-1;				
    						  // 只有当依赖的num改变时 才会重新输出时间语句 
    						},
    						set:function(val){			/* 定义一个接口连接到计算属性set方法 传入一个val 更改他的依赖 实现它的get方法输出我们想要的结果 */
    							this.num = 111;
    						}
    					}
    				},
    				
    				methods:{
    					change(){
    						this.msg1='bye world'
    					},
    					
    					getNum(){								/* 普通的调用方法则会不停执行循环体 用计算属性不同 */
    						console.log(new Date());
    						return this.num-1;
    					},
    					
    					changeNum(){
    						this.computedGetNum = 111;
    					}
    				}
    			});
    			
    			function fn(){
    				setInterval(function(){
    					console.log(vm.getNum())			/* 循环调用methods getNum */
    				},1000)
    			
    			}			
    		</script>
    
    展开全文
  • 这个函数是从获取到的数据中,...methods执行方法虽然也可以执行计算属性,但是methods需要加上()像函数一样调用, computed可直接调用计算名 不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关...

    siytem函数可以当做变量在html中展现,列:{{siytem}}  v-for(item in siytem)遍历也可以。

    这个函数是从获取到的数据中,得到值后再次提取里面的数据,通过下标

     

    methods执行方法虽然也可以执行计算属性,但是methods需要加上()像函数一样调用,

    computed可直接调用计算名

    不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 date变量还没有发生改变,多次访问同一个 计算属性会立即返回之前的计算结果,而不必再次执行函数。

     

    我们为什么需要缓存?假设我们有一个性能开销比较大的计算属性 A,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存,我们将不可避免的多次执行 A 的 getter!如果你不希望有缓存,请用方法来替代。

    转载于:https://www.cnblogs.com/weilizou/p/10769790.html

    展开全文
  • <!DOCTYPE html> <html> <head> <title>Vue --- 计算属性用法</title> </head> <body> <div id="app1"> {{prices()}} </div> ...
    <!DOCTYPE html>
    <html>
    <head>
        <title>Vue --- 计算属性用法</title>
    </head>
    <body>
        <div id="app1">
            {{prices()}}
        </div>
        
    
        <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.min.js"></script>
        <script type="text/javascript">
            var app1 = new Vue({
                el:'#app1',
                data:{
                    package1:[
                        {
                            name:'耳机',
                            price:399,
                            count:2
                        },
                        {
                            name:'显示器',
                            price:488,
                            count:3
                        }
                    ],
                    package2:[
                        {
                            name:'苹果',
                            price:5,
                            count:6
                        },
                        {
                            name:'香蕉',
                            price:12,
                            count:3
                        },
                        {
                            name:'梨子',
                            price:7,
                            count:2
                        }
                    ]
                },
                // computed:{
                //     reversedText: {
                //         get:function () {
                //             return this.name1+'.'+this.name2;
                //         },
                //         set:function (newvalue) {
                //             var names = newvalue.split('.');
                //             this.name1 = names[0];
                //             this.name2 = names[1];
                //         }
                //     }
                // },
                methods:{
                    prices:function () {
                        var price = 0;
                        for (var i = this.package1.length - 1; i >= 0; i--) {
                            price+=this.package1[i].price * this.package1[i].count
                        }
    
                        for (var i = this.package2.length - 1; i >= 0; i--) {
                            price+=this.package2[i].price * this.package2[i].count
                        }
                        return price
                    }
                }
            })
    
        </script>
    </body>
    </html>

     计算属性实例 --- v-for实现筛选排序:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <div id="app">
                <h2>v-for遍历数组</h2>
                <input type="text" name="" id="" value="" v-model="searchp"/>
                <ul>
                    <li v-for="(p,index) in filterpersons" :key='index'>
                        {{index}} -- {{p.name}} -- {{p.age}}
                    </li>
                </ul>
                <button @click="sortbtn(1)">升序排列</button>
                <button @click="sortbtn(2)">降序排列</button>
                <button @click="sortbtn(0)">原本顺序</button>
                <h2>v-for遍历对象</h2>
                <ul>
                    <li v-for="(v,k) in persons[1]" :key='k'>
                        {{k}} -- {{v}}
                    </li>
                </ul>
            </div>
            
            <script src="https://vuejs.org/js/vue.js"></script>
            <script type="text/javascript">
                var  app = new Vue({
                    el:'#app',
                    data:{
                        searchp:'',
                        ordertype:0,//0原本,1升序,2降序
                        persons:[
                            {name:'aaa',age:18},
                            {name:'bbb',age:13},
                            {name:'ccc',age:28},
                            {name:'ddd',age:51},
                            {name:'ddd',age:20},
                            {name:'ddd',age:33},
                            {name:'ddd',age:23},
                        ]
                    },
                    computed:{
                        filterpersons(){
                            //取出相关数据
                            const  {searchp,persons,ordertype} = this;
                            //最终需要显示的数组
                            let  fpersons;
                            
                            fpersons = persons.filter(p => p.name.indexOf(searchp)!==-1)
                            
                            if(ordertype!==0){
                                fpersons.sort(function  (p1,p2) { // 返回负数p1在前
                                    //1升序,2降序
                                    if (ordertype == 2) {
                                        return p2.age-p1.age
                                    } else{
                                        return p1.age-p2.age
                                    }
                                })
                            }
                            return fpersons
                        }
                    },
                    methods:{
                        sortbtn(num){
                            this.ordertype = num
                        }
                    }
                })
            </script>
        </body>
    </html>

     

    转载于:https://www.cnblogs.com/lee-xingxing/p/11103802.html

    展开全文
  • Vue.js之计算属性用法

    2018-08-01 17:15:09
    计算属性可以依赖多个Vue实例的数据,只要其中任一数据变化,计算属性就会重新执行,视图也会更新。 &lt;!DOCTYPE html&gt; &lt;html&gt;  &lt;head&gt;  &lt;meta charset="...

    计算属性可以依赖多个Vue实例的数据,只要其中任一数据变化,计算属性就会重新执行,视图也会更新。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>Vue Computed</title>
        </head>
        <body>
            <div id="app">
                总价:{{prices}}
            </div>
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
            <script type="text/javascript">
                var app = new Vue({
                    el:'#app',
                    data:{
                        package1:[
                        {
                            name:'iphone 7',
                            price:7199,
                            count:2
                        },
                        {
                            name:'sumgalx 9',
                            price:4800,
                            count:10
                        },
                        {
                            name:'ipad',
                            price:2888,
                            count:7
                        }],
                        package2:[
                        {
                            name:'apple',
                            price:3,
                            count:5
                            
                        },
                        {
                            name:'banana',
                            price:2,
                            count:10
                            
                        }]
                    },
                    computed:{
                        prices:function(){
                            var prices = 0;
                            for(var i = 0;i<this.package1.length;i++){
                                prices+=this.package1[i].price*this.package1[i].count;
                            }
                            for(var i = 0;i<this.package2.length;i++){
                                prices+=this.package2[i].price*this.package2[i].count;
                            }
                            return prices;
                        }
                    }
                });
            </script>
        </body>
    </html>

    computed vs methods

    我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。当遍历大数组和做大量计算时,应当使用计算属性。

     

    每一个计算属性都包含一个getter和一个setter,上面的实例都是计算属性的默认用法,只利用了getter来进行读取。在需要时可以通过setter函数执行一些自定义操作。

     

    <div id="app">
                姓名:{{fullName}}
            </div>
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
            <script type="text/javascript">
                var app = new Vue({
                    el:'#app',
                    data:{
                        firstName:'Jack',
                        lastName:'Green'
                    },
                    computed:{
                        fullName:{
                            get:function(){
                                return this.firstName+' '+this.lastName;
                            },
                            set:function(newValue){
                                var names = newValue.split(' ');//split() 方法用于把一个字符串分割成字符串数组。
                                this.firstName = names[0];
                                this.lastName = names[names.length - 1];
                                
                            }
                        }
                    }
                });
             app.fullName='Jhon Doe';//当执行,则视图更新为该条数据。调用setter
            </script>

    展开全文
  • //所有的计算属性都以函数的形式写在vue实例内的computed选项内,最终返回计算的结果 computed:{ prices:function () { var prices = 0; for (var i = 0;i;i++){ prices += this.package1[i].price * this....
  • //这里我们创建了两个vue实例app1和app2,在app2的计算属性reversedText中,依赖的是app1的数据text,所以当text变化时,实例app2的计算属性也会变化这样的用法尤其是在多人协同开发时很常用,因为你写的一个组件...
  • 计算属性 2.setter本节课我们来开始学习 Vue 的计算属性用法以及 setter 功能。一.计算属性1. 对于插值可以进行简单运算,可一旦过于复杂,则模版维护将变得异常困难;<div id="app">{{start}} {{message}}...
  • 为什么要用计算属性? 模板内的表达式非常便利,但是设计他们的初衷是用于简单运算,如果在模板中放入太多逻辑会导致可读性差,后期难以维护,如: <div id='example'> {{message.split('').reverse().join('...
  • 主要介绍了vue.js计算属性computed用法,结合实例形式分析了vue.js使用computed方式进行属性计算的相关操作技巧,需要的朋友可以参考下
  • Vue计算属性用法

    2019-10-04 20:25:08
    计算属性是个很好玩的东西,在这里面可以对数据模型进行操作,·也可以使用getter,setter方法。使用的话也是非常的简洁明了 这里写个例子 <!DOCTYPE html> <html lang="en"> <head> <...
  • 计算属性 1.为何需要计算属性 ...2.计算属性用法 <div id="app"> <div>{{msg}}<div> <div>{{reverseString}}</div> </div> var vm = new Vue({ el:"app", dat...
  • 计算属性实质就是一个方法,只不过在使用的时候只把方法名称作为属性使用,不需要加(),而不是当做方法使用。 只有计算属性的方法内部所用到的任何data中的数据发生变化,就会立刻重新计算这个计算属性的值。 ...
  • 主要介绍了vue计算属性get和set用法,结合实例形式分析了计算属性的功能及get和set用法的具体使用技巧,需要的朋友可以参考下
  • 计算属性默认只有getter,不过在需要时也可以使用setter。默认情况下是使用getter读取的。 比如: 当您要收到去修改计算属性的值,向修改一个普通数据那样时,就会触发setter,执行一些自定义的操作。 比如: 当...
  • VUE-计算属性用法

    2018-07-16 05:49:21
    Vue.js 计算属性 计算属性关键词: computed。 计算属性在处理一些复杂逻辑时是很有用的。   &lt;template&gt; &lt;div&gt; &lt;h1&gt;首页&lt;/h1&gt; {{ count }} &...
  • 计算属性computed案例: 看图: 总结如下: scirpt核心代码如下: 全部代码如下:
  • 本文实例讲述了Vue计算属性与侦听器用法。分享给大家供大家参考,具体如下: vue之所以加载速度非常块,是因为在数据改变时,它并不是将所有组件都刷新,而是在重用代码的基础上对发生改变的地方进行渲染。同时,还...
  • vue模板用法模板用法文本msg原始html,v-htmlv-bind绑定属性表达式应用计算属性 模板用法 文本msg <div id="app"> <h1>{{msg}}</h1><!-- 可写简单表达式 --> </div> <h1 v-...
  • Vue 计算属性

    2019-11-29 21:29:51
    在双向绑定数据和表达式时,由于表达式过长或者逻辑过于复杂,使数据表达式臃肿难以阅读和维护。 所有的计算属性以函数的形式定义在 computed 中,依赖于本实例或者多个实例...计算属性用法 computed: { computed1:...
  • <p> 计算属性: {{ReversedMessage}} <input type="text" v-model="price"></input> 值为watch: {{sum}} 值为computed: {{getData}} <script src = "vue.js"></script> var vm = new Vue( { el:"#app", ...
  • 本文实例讲述了vue计算属性get和set用法。分享给大家供大家参考,具体如下:计算属性是什么:vue文档里是这么说的,模板中绑定太多的逻辑会让模板过重且难以维护。换句话说,就是可以自己设置值(b值),这个值和data...
  • 计算属性computed是基于响应式进行缓存,所以在执行的时候效率高,且只执行一次,从缓存读取,除非data里面的数据有更改才重新调用。注意:计算属性里面必须要ruturn,否则无法拿到结果。计算属性本质是一个函数,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,527
精华内容 610
关键字:

计算属性用法