Vue3中computed的使用

怼烎@ 2022-10-15 01:59 12阅读 0赞

## 方式一 ##

import { computed,reactive} from 'vue'
    export default { 
      name: "LayoutAside",
      setup() { 
        let menuData = reactive(computed(()=>{  //vue3中computed的使用
          return store.state.menus.menuList
        }))
    
        return { 
          menuData
        }
      }
    }
    </script>

## 方式二 ##

<template>
        <h2>输入待求平方的数字：<input type="text" v-model="digit"></h2>
        <div>{ { digit}}的平方是：{ { square}}</div>
    </template>
    
    <script>
        import {  ref, computed } from 'vue'
    
        export default { 
            setup() { 
                const digit = ref(1)
                const square = computed(() => { 
                    return +digit.value * +digit.value
                })
                return { 
                    digit
                }
            }
        }
    </script>

## 方式三 ##

<template>
      <div>
        <p><input type="text" v-model="age"></p>
      </div>
    </template>
    
    <script>
    import {  computed } from 'vue'
    export default { 
      setup() { 
        const age = computed({ 
          get() { 
            return +age.value+1
          },
          set(value) { 
            return age.value = value - 1
          }
        })
        return {  
          age
        }
      }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，12人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue中computed的使用（附带例子）

一、背景遇到一个需求：将后端返回的对象数组按照其某个属性进行分类显示，自然就想到了用computed来进行二次数据处理。二、后端返回的数据格式 {

客官°小女子只卖身不卖艺/ 2024年03月22日 13:38/ 0 赞/ 16 阅读

相关 Vue中的computed属性

computed属性 1.computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者

冷不防/ 2023年02月17日 11:16/ 0 赞/ 22 阅读

相关 vue3 computed和watch

学习笔记记录（内容来源于官网） computed vue3 计算属性和vue2变化不大，只需要注意，它返回的是一个响应式的ref对象,所以在使用的时候需要.value(

迈不过友情╰/ 2023年01月20日 09:45/ 0 赞/ 21 阅读

相关使用computed_Vue中computed与method的区别

1.computed区别于method的两个核心在官方文档中，强调了computed区别于method最重要的两点 1. computed是属性调用，而methods是

逃离我推掉我的手/ 2023年01月07日 08:53/ 0 赞/ 296 阅读

相关 Vue3---Vue3的setup函数中如何使用计算属性computed和监视器watch

setup中使用计算属性computed <template> <div> <p>{ { measure }}</p>

喜欢ヅ旅行/ 2022年10月29日 10:21/ 0 赞/ 192 阅读

相关 Vue中computed的使用

1、需求：在vue模板中要计算某些属性，如下我想要讲mes的内容给反转过来，即本来是`helloworld`，我要它变成`dlrowolleh` 方法1：使用原

ゝ一纸荒年。/ 2022年10月22日 13:59/ 0 赞/ 123 阅读

相关 Vue3中computed的使用

方式一 import { computed,reactive} from 'vue' export default { name: "Lay

怼烎@/ 2022年10月15日 01:59/ 0 赞/ 13 阅读

相关 Vue中的computed属性

computed属性是什么？ Vue中的`computed`属性称为计算属性，通过该关键字可以监听多个变量或者多个对象。如果改变的值和原值一样，那么就不会触

我就是我/ 2022年10月01日 12:56/ 0 赞/ 219 阅读

相关 vue3 监听computed属性

![在这里插入图片描述][a79c8a68c9cd0debd686357f7d50170e.png] <script> import { defineCom

亦凉/ 2022年08月31日 02:27/ 0 赞/ 285 阅读

相关 vue3.0 computed

计算属性: 返回一个 ref 对象。使用: import { computed } from 'vue'

水深无声/ 2021年07月24日 20:25/ 0 赞/ 374 阅读