精华内容
下载资源
问答
  • 计算属性

    千次阅读 2019-08-22 08:03:34
    计算属性 计算属性在Vue实例中使用computer选项来实现。 计算属性的书写格式:computed:{ 属性名:function(){ return 返回值; } } 在computed中定义的function不是方法,而是属性。 计算属性在data中不用书写。 例1...

    计算属性

    1. 计算属性在Vue实例中使用computer选项来实现。
    2. 计算属性的书写格式
      computed:{ 属性名:function(){ return 返回值; } }
      在computed中定义的function不是方法,而是属性。
      计算属性在data中不用书写。
    3. 例1:实现两个数值的相加
      computed:{ add:function(){ return this.numA+this.numB; } }
      ①上述代码中的计算属性是add。
      ②计算属性执行的function中涉及到的数据量被称为计算属性的依赖数据。
      ③计算属性:当该属性的依赖数据发生变化时,则该属性会重新进行计算。
      ④计算属性执行的function中renturn的返回值是计算属性计算的最终结果。

      例2:实现两个数值的加减乘除运算(add、sub、mul、div)。
    		var app=new Vue({
                el:'#app',
                data:{
                    numA:0,
                    numB:0
                },
                computed:{
                    result:function(){
                        var add=this.numA+this.numB;
                        var sub=this.numA-this.numB;
                        var mul=this.numA*this.numB;
                        var div=this.numA/this.numB;
                        return {add:add,sub:sub,mul:mul,div:div}
                    }
                }
    

    通过上面两个案例我们认识到计算属性的方便~

    下面让我们进一步了解计算属性的用法:

    1. 计算属性包含两个操作:
      ①getter,获取计算属性的结果,默认的function是获取结果。用get:function(){}实
      现。当依赖数据发生变化时会自动执行get函数。
      ②setter,设置计算属性的结果。用set:function(){}实现。当计算属性通过v-model绑定在表单元素上,用户对表单元素的值进行了修改时执行set函数。
    computed:{
    	   result:{
    		     get:function(){
    		       		return 返回值;
    			},
    			set:function(参数){
    			
    			}
        	}
    }
    
    1. 例:实现姓名的拆分:
      本案例是通过Vue的v-model指令实现,我们来看一下整体是这样的:
      在这里插入图片描述
      然后当我们在姓名框里书写姓名的时候他会自动的把姓和名分开:
      ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190822075123227.png]

    实现原理很简单,用我们所学的v-model指令分别绑定输入框,然后通过上述的getter和setter拆分和拼凑姓名,同样也是数据的双向绑定。

    HTML代码:

    	<div id="app">
            <p>姓名:<input type="text" v-model="fullName"></p>
            <p>
                姓:<input type="text" v-model="firstName">
                名:<input type="text" v-model="lastName">
            </p>
        </div>
    

    Javascript代码:

    		var app=new Vue({
                el:'#app',
                data:{
                    firstName:'',
                    lastName:'',
                    fuX:["欧阳","慕容","迪丽","上官","百里","干将","端木","独孤"]//简单的列举了几个复姓的例子
                },
                computed:{
                    fullName:{
                        get:function(){
                            return this.firstName+this.lastName;
                        },
                        set:function(newName){
                            var flag=0;  //不是复姓
                            var temp=newName.slice(0,2);
                            for(var i=0;i<this.fuX.length;i++){
                                if(temp==this.fuX[i]){
                                    flag=1;         //利用for循环遍历复姓里的内容,如果有就跳出循环,输出复姓
                                    break;
                                }
                            }
                            if(flag==0){
                                this.firstName=newName[0];
                                this.lastName=newName.slice(1);
                            }else{
                                this.firstName=temp;
                                this.lastName=newName.slice(2);
                            }
                        }
                    }
                }
            })
    

    原理其实很简单,就是通过v-model指令配合computed计算属性来实现,里边的一些逻辑关系很清晰

    希望对你有帮助哦~

    展开全文
  • vue中computed计算属性传入参数

    万次阅读 2018-09-01 16:56:42
    使用JavaScript闭包,进行传值操作。 computed: { // 控制显示的内容 computedTxt() { return function(value) { return this.methodGetByteLen(value, 20) ...做一个简单的功能,使用计算属性判断传入的...

    将计算属性的返回值改为函数,再进行传值操作。

    computed: {
          // 控制显示的内容
          computedTxt() {
            return function(value) {
              return this.methodGetByteLen(value, 20)
            }
          }
    }

    做一个简单的功能,使用计算属性判断传入的字符超过了20就去掉后面的字符在尾部添加。。。

    /**
           * str 需要控制的字符串
           * len 字节的长度,如5个汉字,10个英文,输入参数就是10
           */
          methodGetByteLen(str, len) {
            //因为第一次进入时为空,所以此if进行拦截
            if (str === null || str === undefined || str == '') {
              return;
            }
            // 如果字节的长度小于控制的长度,那么直接返回
            if (this.computedCharLen(str) <= len) {
              return str
            }
            for (let i = Math.floor(len / 2); i < str.length; i++) {
              if (str.substr(0, i).replace(/[^\x00-\xff]/g, '01').length >= len) {
                return str.substr(0, Math.floor(i / 2) * 2) + '......'
              }
            }
          },
          // 获取字符的个数
          computedCharLen(str) {
            let realLength = 0, len = str.length, charCode = -1;
            for (let i = 0; i < len; i++) {
              charCode = str.charCodeAt(i);
              if (charCode >= 0 && charCode <= 128) realLength += 1;
              else realLength += 2;
            }
            return realLength;
        }
    <ul class="r-list">
          <li v-for="(item,index,key) in result" :key="key">
            <div>{{computedTxt(item.title)}}</div>
            <div>{{item.time}}</div>
          </li>
        </ul>

    还可以使用filters 过滤器。

    展开全文
  • vue计算属性与监视属性

    千次阅读 2020-12-15 16:47:29
    计算属性与监视属性 计算属性 在computed对象中定义计算属性的方法,在页面中使用{{方法名}} 监视属性 通过 vm对象中的$watch方法或者 watch配置来监视指定的属性, 当属性发生变化时,回调函数自动调用,在函数内部...

    计算属性与监视属性

    计算属性
    在computed对象中定义计算属性的方法,在页面中使用{{方法名}}
    监视属性
    通过 vm对象中的$watch方法或者 watch配置来监视指定的属性,
    当属性发生变化时,回调函数自动调用,在函数内部进行计算

    使用vue计算属性实现一个简单的查找:

    效果前:
    效果前
    效果后:
    效果后

    html里面写:

    <div id="app">
            <input type="text" placeholder="请输入商品" v-model="value" /><button>搜索</button>
            <div v-for="(sou,key) in sous" :key="key">{{sou.name}}</div>
        </div>
    

    组件里面写:

    	<script src="node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
    		 var vm = new Vue({
    		            el: "#app",
    		            data: {
    		                value: "",
    		                ai: [{ name: "Timi", age: 10 },
    		                { name: "Tom", age: 18 },
    		                { name: "Jack", age: 12 },
    		                { name: "Maria", age: 21 },
    		                ]
    		            },
    		            computed: {
    		                sous() {
    		                //使用filter过滤在返回给sous
    		                    return this.ai.filter(val => val.name.indexOf(this.value) !== -1)
    		                }
    		            }
    		        })
               </script>
    
    
    展开全文
  • 计算属性与监听属性

    千次阅读 2020-12-15 16:39:50
    计算属性:watch和computed的区别 computed:是一个计算属性具有依赖性只执行一次就拿出来调用下一次获取computed的值时才会重新计算 。 watch:当一条数据影响多条数据的时候就要用watch。 下面展示一些 内联代码...

    计算属性:watch和computed的区别

    computed:是一个计算属性具有依赖性只执行一次就拿出来调用下一次获取computed的值时才会重新计算 。
    在这里插入图片描述

    watch:当一条数据影响多条数据的时候就要用watch。
    下面展示一些 内联代码片

    new Vue({
      data: {
        n: 0,
        obj: {
          a: "a"
        }
      },
      template: `
        <div>
          <button @click="n += 1">n+1</button>
          <button @click="obj.a += 'hi'">obj.a + 'hi'</button>
          <button @click="obj = {a:'a'}">obj = 新对象</button>
        </div>
      `,
      watch: {
        n() {
          console.log("n 变了");
        },
        obj:{
          handler: function (val, oldVal) {
          console.log("obj 变了")
        },
          deep: true // 该属性设定在任何被侦听的对象的 property 改变时都要执行 handler 的回调,不论其被嵌套多深
        },
        "obj.a":{
          handler: function (val, oldVal) {
          console.log("obj.a 变了")
        },
          immediate: true // 该属性设定该回调将会在侦听开始之后被立即调用
        }
      }
    }).$mount("#app");
    

    注意:不应该使用箭头函数来定义watcher函数,因为箭头函数没有this,因为他的this会继承它的父。

    vm.$watch() 的用法和 watch 回调类似

    下面展示一些 内联代码片

    vm.$watch('data属性名', fn, {deep: .., immediate: ..})
    vm.$watch("n", function(val, newVal){
          console.log("n 变了");
    },{deep: true, immediate: true})
    

    当我们需要进行数值计算,并且依赖于其它数据时,应该使用 computed,因为可以利用 computed 的缓存特性,避免每次获取值时,都要重新计算;

    当我们需要在数据变化时执行异步或开销较大的操作时,应该使用 watch,使用 watch 选项允许我们执行。

    总结:如果一个数据需要经过复杂计算就用 computed
    如果一个数据需要被监听并且对数据做一些操作就用 watch

    展开全文
  • Vue计算属性

    2019-05-28 10:04:46
    关于计算属性介绍: 1.所有的计算属性都以函数形式写在Vue实例内的computed选项内,最终return返回计算后的结果。 2.每个计算属性都会有一个getter和setter函数,手动修改计算属性时就会触发setter函数,getter...
  • vue 计算属性可以依赖其他计算属性 学习 例子 整理 记录 自学 前端 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <div i...
  • 一些初学者可能对计算属性和侦听属性的使用场景感到困惑不解,本文主要介绍两者的用法、使用场景及其两者的区别。 本文的代码请猛戳github博客,纸上得来终觉浅,大家动手多敲敲代码! 计算属性 1.介绍 计算属性是...
  • computed:计算属性,用于定义一个函数; 本猿在学习的过程中总是把它和生命周期钩子函数弄混了! computed是定义监听某个元素或者某事el的变化,发生变化后触发computed,如果没发生变化,不会触发函数; 这也是...
  • Vue 计算属性与监听属性

    千次阅读 2019-05-16 10:01:04
    这篇文章将介绍计算属性与监听属性去解决该问题。 计算属性 [什么是计算属性?] 首先,来看一个字符串反转的例子: <div id="app1"> {{ message.split('').reverse().join('') }} </div> <s...
  • 一、计算属性(computed) 当依赖的data对象中的属性值发生变化时,将会触发计算方法,在data对象中生成新的变量,并且会将新的变量缓存起来;(只要依赖的data对象属性值不发生改变,将不会触发计算方法;) ...
  • vue计算属性和侦听属性

    千次阅读 2018-07-12 12:58:15
    计算属性和侦听属性计算属性模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:&lt;div id="example"&gt; {{ message.split('...
  • 另一种是计算属性,它计算一个值,类似于方法的功能,提供了一个处理数据的入口与出口。计算属性可以用于类、结构和枚举里,存储属性只能用于类和结构体里。 存储属性的作用是把常量或变量的值作为实例的一部分...
  • dart-计算属性

    2019-05-07 15:54:39
    class Node { int start;... * 计算属性 */ int get res { return start + end; } /* * 计算属性 */ set res(int s) { start = s; } } 计算属性的使用和属性一样,不是方法 Node node = ...
  • Vue中的计算属性和监听属性

    千次阅读 2019-03-25 17:09:33
    Vue中的计算属性和监听属性 在项目中难免会遇到计算属性和监听属性,这两个都可以 监听数据的变化,但是又有些不同,在这里总结一下 1.computed计算属性 当需要监听一些数据需要随着其它数据变动而变动时,通常更好...
  • Swift-计算属性

    2016-12-04 22:05:41
    计算属性 /* 5、计算属性 (1)Swift中计算属性不直接存储值,跟存储属性不同,没有任何的“后端存储与其对应” (2)计算属性用于计算,可以实现setter和getter两种计算方法 (3)枚举不可以有存储属性,但是允许...
  • 计算属性(computed) vue中的计算属性是非常棒的东西,它兼具了逻辑和变量。可以让我们不再关注视图层,值关注代码的逻辑即可。至于数据如何展现则只需由Vue负责,不需要我们的参与。 所以如果在面临选择是使用...
  • vue 计算属性

    千次阅读 2018-07-05 22:15:51
    于是对于任何复杂逻辑,都应当使用计算属性。例如: &lt;div id="example"&gt; &lt;p&gt;{{ msg }}&lt;/p&gt; &lt;p&gt;{{ myMsg }}&lt;/p&gt; &a
  • vue计算商品总价使用 ---- 计算属性 注 命名规则: 属性名称,方法名称,变量名称 尽量使用小驼峰命名法 computed:{ totalPrice() { let totalPrice = 0 for (let i = 0; i< this.books.length; i++) { ...
  • vue computed计算属性传值并返回计算结果
  • 有时在工作用用到计算属性和监听属性,可以写少很多行的代码,对开发效率有很大的提高; 计算属性 computed 计算属性时根据实例的数据项计算而来的结果 优点是可以使用缓存,性能高 使用实例,属性fullName是由...
  • vue 计算属性computed

    2018-06-22 17:06:32
    vue的计算属性作用是监听data里面的数据变化举个例子写了一个input输入框,用v-model绑定一下data里面的数据当我要改变Input里面值的时候,通过计算属性监听计算属性:参数一是名称 (myMsg是自己取的名,在...
  • Swift计算属性

    千次阅读 2015-07-20 00:40:17
    // Swift计算属性 // // Created by Goddog on 15/7/20. // Copyright © 2015年 Goddog. All rights reserved. // import Foundation print("swift的计算属性类似于Java的setter和getter方法,枚举、结构体...
  • Vue入门指南——计算属性

    千次阅读 2020-01-27 00:26:43
    2. 计算属性的用法3. 计算属性与方法的区别4.小案例 1. 为何需要计算属性? 表达式的计算逻辑可能会比较复杂,使用计算属性可以使模板内容更加简洁 2. 计算属性的用法 computed: { reversedMessage: function () { ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 53,517
精华内容 21,406
关键字:

计算属性