精华内容
下载资源
问答
  • Vue计算属性的使用

    2020-08-29 19:20:46
    本篇文章主要介绍了Vue计算属性的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue计算属性的使用

    2020-12-30 11:52:55
    代码 <h2>{{totalPrice}}</h2> books: [ {price: 10}, {price: 11}, {price: 12} ] computed:{ totalPrice(){ let result='' for(let i in this.books){ result += this.books[i].price ...}

    代码

    <h2>{{totalPrice}}</h2>
    
    books: [
    	{price: 10},
    	{price: 11},
    	{price: 12}
    ]
    
    computed:{
    	totalPrice(){
    		let result=''
    		for(let i in this.books){
    			result += this.books[i].price
    		}
    		return result;
    	}
    }
    
    展开全文
  • vue计算属性的使用(computed) 我们在一些数据需要实时响应,经常更新的地方使用计算属性,虽然说定义一个方法也可以,直接在{{}}中写入逻辑代码也行,但是难免看起来会有一点麻烦,并且后期也不易维护. 比如: 使用vue进行...

    vue计算属性的使用(computed)

    我们在一些数据需要实时响应,经常更新的地方使用计算属性,虽然说定义一个方法也可以,直接在{{}}中写入逻辑代码也行,但是难免看起来会有一点麻烦,并且后期也不易维护.

    比如使用vue进行2个文本框中的数值求和,你可以直接在{{}}中进行运算

    <body>
     <div id="box">
       <input type="text" v-model="num1">
       <input type="text" v-model="num2">
        {{(num1-0)+(num2-0)}}   //会直接输出总和
     </div>
     <script>`在这里插入代码片`
       new Vue({
         el:'#box',
         data:{
           num1:null,
           num2:null
        }
      })
     </script>
    </body>
    

    也可以使用方法进行计算

    <body>
     <div id="box">
       <input type="text" v-model="num1">
       <input type="text" v-model="num2">
        {{sum()}}  
     </div>
     <script>
       new Vue({
         el:'#box',
         data:{
           num1:null,
           num2:null,
        },
         methods: {
           sum(){
              return (this.num1-0)+(this.num2-0)
          }
        },
      })
     </script>
    </body>
    

    使用计算属性来写

    <body>
     <div id="box">
       <input type="text" v-model="num1">
       <input type="text" v-model="num2">
        {{mycomputed}}
     </div>
     <script>
       new Vue({
         el:'#box',
         data:{
           num1:null,
           num2:null,
        },
         computed: {
             // 计算属性可以当做属性来调用
           mycomputed(){
              return (this.num1-0)+(this.num2-0)
          }
        },
      })
     </script>
    </body>
    
    • 第一种方法直接在页面中 {{ }}写逻辑代码,虽然可以很顺利的得出结果,但是当代码逻辑稍微复杂的时候,整个代码就会看起来很乱,后面维护起来就会很麻烦
    • 第二种与第三种,虽然都是将逻辑代码写在methods,computed的方法中,表面上看起来调用是只是加不加’( )’ 小括号的区别,但是它们2个还是有区别的
    <body>
     <div id="box">
       <p>在methods定义的方法</p> 
       
      {{mymethods()}}
      {{mymethods()}}
    
       <br>
    
       <p>使用computed计算属性</p>
    
      {{mycomputed}}
      {{mycomputed}}
    
     </div>
     <script>
       new Vue({
         el:'#box',
         data:{
           mytext:"abcdef"
        },
         methods:{
           mymethods() {
             console.log("mymethods")
             return this.mytext.substring(0,1).toUpperCase()+this.mytext.substring(1)
          }
    
        },
         computed:{
           mycomputed(){
             console.log("computed")
             return this.mytext.substring(0,1).toUpperCase()+this.mytext.substring(1)
          }
        }
      })
     </script>
    </body>
    

    运行上面的代码会显示这样的结果
    在这里插入图片描述

    • 结果看起来都是对的,都是首字母大写,并且都被调用了两次,但是当我们打开控制台,看打印次数时,会发现

    在这里插入图片描述

    • Methods的方法被调用了两次,而computed中的方法,确只被调用了一次,这是因为第二次是直接在缓存中取得的结果值.

      如果我将初始值改变

    在这里插入图片描述
    在这里插入图片描述

    发现页面数据也会跟着改变,这是因为计算属性是依赖性缓存,当依赖的值发生改变,那么计算属性就会跟着改变,当然缓存中的数据也会被替换,所以后面再次调用时,还是会直接从缓存中拿取结果.所以计算属性中的方法,只会被调用一次.既然有缓存的话,那么我们在一些数据结果,需要被多次调用的地方,使用计算属性,就可以大大提高数据的计算效率.

    展开全文
  • vue计算属性的使用我们有时候会在模板中绑定表达式来做简单的数据处理,但是如果表达式太长,就会变得臃肿难以维护,比如{{text.split(',').reverse().join(',')}}表达式里面包含了3个操作,有时候可能会更加复杂,...

    vue计算属性的使用

    我们有时候会在模板中绑定表达式来做简单的数据处理,但是如果表达式太长,就会变得臃肿难以维护,比如

    {{text.split(',').reverse().join(',')}}

    表达式里面包含了3个操作,有时候可能会更加复杂,这时我们可以使用计算属性。如下

    {{reversedText}}

    data(){return{

    text:'123,456'}

    },

    computed: {

    reversedText:function() {//这里的this指向的是当前的vue实例

    return this.text.split(',').reverse().join(','); //如果这两的text是后台接受的数据,最好加个判断数据为不为空

    }

    }

    }

    在一个计算属性里可以完成各种复杂的逻辑,包括运算、函数调用等,只要最终返回一个结果就可以,计算属性还可以依赖多个

    数据,只要其中任何一个数据变动,计算都会重新执行。例如:

    总价:{{price}}

    data(){return{

    package1: [

    {

    name:'iPhoneX',

    price:300,

    count:1},

    {

    name:'iPad',

    price:100,

    count:2}

    ],

    package2: [

    {

    name:'apple',

    price:2,

    count:5},

    {

    name:'orange',

    price:1,

    count:10}

    ]

    }

    },

    computed: {

    price:function() {var price = 0;for(var i = 0; i < this.package1.length; i++){

    price+= this.package1[i].price * this.package1[i].count

    }for(var i = 0; i < this.package2.length; i++){

    price+= this.package2[i].price * this.package2[i].count

    }returnprice;

    }

    }

    }

    当package1或者package2中price和count有任何变动时,计算属性都会price都会自动更新,视图中的总价也会自动变动。

    每个计算属性都包含一个getter和setter,上面的例子都是计算属性的默认用法,只是利用了getter来读取。计算属性提供的setter函数,当你手动修改计算属性的值时,就可以触发setter函数,执行一些操作。例如

    姓: {{firstName}}
    名: {{lastName}}
    姓名:{{fullName}}

    data(){return{

    firstName:'wang',

    lastName:'leilei'}

    },

    computed: {

    fullName: {//getter用于读取

    get: function() {return this.firstName + ' ' + this.lastName;

    },

    set:function(newValue) {var names = newValue.split(' ');this.firstName = names[0];this.lastName = names[names.length - 1];

    }

    }

    }

    }

    上面这个例子中,当改变fullName的值改变,this.fullName = "Jon Snow"; firstName和lastName的值也会跟着改变。

    就算属性还有两个使用小技巧容易被忽略:一个是计算属性可以依赖其他计算属性;一个是计算属性不仅可以依赖当前vue实例,还可以依赖其他实例的数据!

    展开全文
  • vue教程2-03 vue计算属性的使用 computed computed:{ b:function(){ //默认调用get return 值 } } -------------------------- computed:{ b:{ get: ...

    vue教程2-03 vue计算属性的使用 computed

    computed:{
            b:function(){    //默认调用get
                return 值
            }
        }
        --------------------------
        computed:{
            b:{
                get:
                set:
            }
        }
    
        * computed里面可以放置一些业务逻辑代码,一定记得return

     

     

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        </style>
        <script src="vue.js"></script>
        <script>
    
        </script>
    </head>
    <body>
        <div id="box">
            a => {{a}}
            <br>
            b => {{b}}
        </div>
        <script>
            var vm=new Vue({
                el:'#box',
                data:{
                    a:1
                },
                computed:{
                    b:{
                        //业务逻辑代码,b的值完全取决于return回来的值
                        get:function(){
                            return this.a+2;//默认调用get
                        },
                        set:function(val){
                            this.a=val;
                        }
                    }
                }
            });
    
            document.onclick=function(){
                vm.b=10;//相当于set函数传入val=10
            };
        </script>
    </body>
    </html>

     

    转载于:https://www.cnblogs.com/baiyangyuanzi/p/6772954.html

    展开全文
  • vue计算属性的使用和vue实例的方法

    千次阅读 2017-12-03 21:08:08
    vue计算属性和vue实例对象简单方法
  • 当需要使用多个变量计算结果时,若在元素中写表达式将会显得很别扭,此时可以利用vue的计算属性,将计算结果返回给一个计算属性,后面直接使用该属性,利用计算属性结合v-module可以实现简单计算器功能 ...
  • 计算属性</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!-- 1.基本用法 --> <h2&...
  • 计算属性就是模板内表达式非常便利,但是设计它们初衷是用于简单运算。这篇文章主要介绍了vue计算属性详解,需要朋友可以参考下
  • 主要介绍了vue计算属性computed的使用方法,结合实例形式分析了vue计算属性computed的基本用法及相关操作注意事项,需要的朋友可以参考下
  • 本文介绍了vue计算属性的使用和vue实例的方法示例,分享给大家,具体如下: 计算属性 在模板中表达式非常便利,但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且...
  • 计算属性的基本使用初始小示例:代码:window.onload = () =>{newVue({el:'div',data:{msg:''}})}原样显示:{{msg}}...因此就引入了计算属性的应用Vue计算属性:更强大的属性声明方式,可以对定义的属性进行逻...

空空如也

空空如也

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

vue计算属性的使用

vue 订阅