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

    2019-09-28 13:25:53
    computed计算属性的三个特点 1.计算属性使用时当作普通属性使用,不能加()当方法使用 2.计算属性的function内部,任何data发生改变,这个计算属性就会重新计算 3.计算属性的结果会被暂时缓存,方便下次使用 <...

    computed计算属性的三个特点

    1.计算属性使用时当作普通属性使用,不能加()当方法使用

    2.计算属性的function内部,任何data发生改变,这个计算属性就会重新计算

    3.计算属性的结果会被暂时缓存,方便下次使用

    <input type="text" placeholder="姓名" v-model='fullname'>
    
    ------------------------------------------------------------------------ 
    
    var vm = new Vue({
        el:"#app",
        data:{
            firstname:'',
            lastname:'',
        },
        computed:{  
            //在computed中可以定义一些计算属性, 注意使用时直接当做 属性 来使用,不当做方法!!
            'fullname':function(){
                 return this.firstname+'-'+this.lastname
            }
        }
    })
    
    
    
    
    
    
    

    计算属性的set方法

    <input type="text" placeholder="姓名" v-model='myName' @input="changeNanme">
    
    ------------------------------------------------------------------------ 
    
    var vm = new Vue({
        el:"#app",
        data:{
            name:'Tom',
        },
        methods:{
            changeNanme(e){
                const value = e.target.value;
                this.myName = value;
            }
        },
        computed:{  
           myName:{
               set:function(newVal){
                    this.name = newVal;
               },
               get:function(){
                    return this.name
               }
           }
        }
    })

     

    展开全文
  • computed 计算属性

    2018-06-05 14:54:00
    <!-- 计计算属性 computed--> <div id="app14"> {{ message }} {{ newMessage1 }} {{ newMessage() }} </div> 调用: StudyComputed("#app14") ...
        <!-- 计计算属性 computed-->
        <div id="app14">
            {{ message }}
            {{ newMessage1 }}
            {{ newMessage() }}
        </div>
    
    
    调用:
      StudyComputed("#app14")
    
    
    实现:
    
    
    
    //computed vs methods
    //我们可以使用 methods 来替代 computed,
    //效果上两个都是一样的,但是 computed 是基于它的依赖缓存,
    //只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。
    function StudyComputed(obj) {
        new Vue({
            el: obj,
            data: {
                message:'zzzz'
            },
            computed: {              //可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。
                newMessage1: function () {
                    return this.message+'hao'
    
                }
            },
    
            methods: {
                newMessage: function () {
                    return this.message + 'hao'
                }
            }
    
        })
    
    
    }
    

      

    转载于:https://www.cnblogs.com/hnzheng/p/9139789.html

    展开全文
  • Computed 计算属性是 Vue 中常用的一个功能,本篇文章主要介绍了Vue Computed 计算属性原理,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 在本篇文章里小编给大家分享的是关于Vue computed 计算属性代码实例,需要的朋友们可以参考下。
  • computed计算属性应用

    2019-12-29 21:17:53
    Vue本身支持模板中使用复杂表达式表现业务数据,但是这会使得模板内容过于杂乱,如果确有需求,可以通过computed计算属性实现,该computed可以对其他data做复杂合成处理的 语法: new Vue({ el:xx, data:xx, ...

    目标:

    知道什么是计算属性及什么时候应用
    

    computed计算属性:

    Vue本身支持模板中使用复杂表达式表现业务数据,但是这会使得模板内容过于杂乱,如果确有需求,可以通过computed计算属性实现,该computed可以对其他data做复杂合成处理的

    语法:

    new Vue({
      el:xx,
      data:xx,
      computed:{
        // 属性名称:function(){
        属性名称(){
          // 业务表达式实现,可以通过this操作data成员
          return  返回结果
        }
      }
    })
    

    计算属性普通函数赋值或简易成员函数 赋值 都可以,不要使用箭头函数

    使用:

    形式上,如何应用data成员,就如何应用计算属性

    {{ computed计算属性名称 }}     <!--模板中-->
    this.XXX				<!-- Vue实例内部-->
    

    什么时候应用:

    如果页面需要访问一个数据,这个数据比较复杂,是需要通过其他data经过复杂逻辑制作出来的,就可以使用“计算属性”

    特点:

    1. 计算属性关联的data如果发生变化,会重新编译执行 获得 并 使用 对应新结果,即响应式(入口)
    2. 计算属性的返回信息有变化,使用的地方也会重新编译执行,还存在出口响应式
    3. 计算属性内部可以使用this关键字,与Vue对象等效
    4. 每个计算属性都需要通过return关键字返回处理结果

    与methods方法的区别:

    1. computed计算属性本身有“缓存”,在关联的data没有变化的情况下,后续会使用缓存结果,节省资源
      methods方法没有缓存,每次访问 方法体 都需要加载执行,耗费资源
    2. methods应用逻辑较复杂,例如内部可以嵌入ajax,或互相调用,而computed比较纯粹,只是操作data的
    展开全文
  • 文章目录computed:1、基本使用:1.1 应用场景:1.2 代码位置:1.3 值:2、复杂操作-结合data中数据:3、计算属性写法演变:3.1 计算属性的setter和getter:① 完整的计算属性写法:属性+方法② 计算属性一般只有get...

    文章目录

    computed:

    1、基本使用:

    1.1 应用场景:

    1.2 代码位置:

    1.3 值:

    2、复杂操作-结合data中数据:

    3、计算属性写法演变:

    3.1 计算属性的setter和getter:

    ① 完整的计算属性写法:属性+方法

    ② 计算属性一般只有get方法,是只读属性。所以一般写法为:

    ③ 语法糖---简化写法:

    4、项目中实例:

    computed:

    1、基本使用:

    在computed中定义一个函数(看起来是一个函数,其实是一个属性),命名按照属性规范命名(一般为名词)。

    1.1 应用场景:

    当数据A的逻辑很复杂时,把A这个数据写在计算属性中。

    1.2 代码位置:

    通过选项computed:{计算属性a:值}

    1.3 值:

    带有返回值return的函数。

    计算属性a和data中的数据用法一样。计算属性在computed中进行定义,无需再在data中定义,在template中直接可进行使用,使用方式与data中定义的数据一样。

    {{msg}}


    {{str}}

    var vm = new Vue({

    el: '#app',

    data: {

    msg: 'abc'

    },

    computed: {

    str: function () {

    return this.msg

    }

    },

    methods: {

    }

    })

    执行结果:

    b4adceb9887739cce34723417873076f.png

    2、复杂操作-结合data中数据:

    当计算属性b依赖了data中的数据a时,当a变化时,b会自动变化。这也是在开发中通常用到的情况。比如在购物的时候,下某一订单时,每选择一件商品(对应data中的数据a),合计费用(对应计算属性b)就会跟着变化。

    79b7367d7acc8bc0f759b54a63925c5e.png

    下方的例子即模拟上方的效果:

    总价格:{{totalPrice}}

    var vm = new Vue({

    el: '#app',

    data: {

    books: [

    { id: 1000, name: 'Linux编程之美', price: 50 },

    { id: 1001, name: 'Java疯狂讲义', price: 60 },

    { id: 1002, name: '深入理解计算机原理', price: 80 },

    { id: 1003, name: '操作系统', price: 30 },

    { id: 1004, name: '数据结构导论', price: 60 },

    ]

    },

    computed: {

    totalPrice() {

    let result = 0;

    for (let i = 0; i < this.books.length; i++) {

    result += this.books[i].price;

    }

    return result

    }

    },

    methods: {

    }

    })

    执行结果:

    fa8da0ace95a30e6223a18001734f87a.png

    3、计算属性写法演变:

    3.1 计算属性的setter和getter:

    computed:{

    //computed里面是大括号,本身就是对象。

    }

    ① 完整的计算属性写法:属性+方法

    computed: {

    //定义属性

    totalPrice: {

    //totalPrice 属性对应的是对象,不是字符串。对象就会有方法。

    //该属性对应的set方法 和get方法

    //计算属性一般是没有set方法的,是只读属性。

    //【此处set测试失败 没有出现预期效果】

    set: function (newValue) {

    console.log('get方法调用啦', newValue);

    },

    get: function () {

    console.log('计算属性完整写法:计算啦');

    let result = 0;

    for (let i = 0; i < this.books.length; i++) {

    result += this.books[i].price;

    }

    return result

    }

    }

    },

    ② 计算属性一般只有get方法,是只读属性。所以一般写法为:

    computed: {

    totalPrice: function () {

    //后面对应的即为get方法。totalPrice就是一个属性,调用时采用属性调用的方式,区别于方法调用()

    console.log('计算属性一般写法:计算啦');

    let result = 0;

    for (let i = 0; i < this.books.length; i++) {

    result += this.books[i].price;

    }

    return result

    }

    },

    ③ 语法糖—简化写法:

    computed: {

    totalPrice() {

    console.log('计算属性语法糖写法:计算啦');

    let result = 0;

    for (let i = 0; i < this.books.length; i++) {

    result += this.books[i].price;

    }

    return result

    }

    },

    4、项目中实例:

    以上即为计算属性computed的使用方式。最近在项目开发中,有个需求为:【考试配题模块】配置某一题型(例如选择题/简答题等某类试题)个数或者每一小题分数时,会实时计算出当前选择的某类试题拥有的个数和当前题目个数所对应的小题分数的总分之和。如图所示效果:

    2aac0abda2d435d0cce2127a67d30638.png

    template中代码:

    课程名称:{{ courseName }}
    总题数:{{ allQuestion }}个
    当前总分:{{ allValue }}分

    computed中代码:

    allQuestion: function() {

    var num = 0;

    this.selectedObj.forEach((item) => {

    num += item.questionNum; //questionNum为拿到的selectedObj对象中的需要使用的属性

    });

    return num;

    },

    //计算总分

    allValue: function() {

    var source = 0;

    this.selectedObj.forEach((item) => {

    source += item.questionValue * item.questionNum; //questionValue 为拿到的selectedObj对象中的需要使用的属性

    });

    return source;

    },

    },

    computed中依赖的data中数据部分:

    // 子组件给父组件传过来的对象

    selectedObj: [],

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

    万次阅读 2018-09-01 16:56:42
    使用JavaScript闭包,进行传值操作。 computed: { // 控制显示的内容 computedTxt() { return function(value) { return this.methodGetByteLen(value, 20) ...做一个简单的功能,使用计算属性判断传入的...
  • 主要为大家详细介绍了Vue computed计算属性的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 我们知道, 在模板中可以直接通过插值语法显示一些data中的数据....但是如果多个地方都需要显示完整的名称, 我们就需要写多个{{firstName}} {{lastName}}我们可以将上面的代码换成计算属性:OK, 我们发现...
  • vue3.0 computed计算属性

    2021-05-08 09:06:29
    1: computed:用于创建一个计算属性: vue.3.0 中用于从vue 按需导入 computed 计算属性。 2: 如果传入的是一个getter 函数, 会返回一个不允许修改的计算属性 3: 如果传入一个带有getter 和 setter 函数的对象...
  • computed 计算属性区域

    2021-04-13 09:28:53
    常规方法: <script> export default{ name:"compon", data() { return { } }, methods: { ...computed ...计算属性区域 类似变量的声明 监听变量 可以缓存之前的变量值 默认只能读取 readonly

空空如也

空空如也

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

computed计算属性