Composition API 和 computed方法生成计算属性

素颜马尾好姑娘i 2023-01-22 12:47 1阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Composition API 和 computed方法生成计算属性</title>
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>
      <div id="root"></div>
    </body>
    <script>
      // computed 计算属性
      const app = Vue.createApp({
        setup() {
          const { reactive, computed } = Vue;
          const countObj = reactive({ count: 0});
          const handleClick = () => {
            countObj.count += 1;
          }
          let countAddFive = computed({
            get: () => {
              return countObj.count + 5;
            },
            set: (param) => {
              countObj.count = param - 5;
            }
          })
    
          setTimeout(() => {
            countAddFive.value = 100;
          }, 3000)
    
          return { countObj, countAddFive, handleClick }
        },
        template: `
          <div>
            <span @click="handleClick">{
       {countObj.count}}</span> -- {
       {countAddFive}}
          </div>
        `,
      });
      
      const vm = app.mount('#root');
    </script>
    </html>

发表评论取消回复

表情：

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

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

相关阅读

相关 vue3 composition api计算属性computed传参与处理的写法

composition api中是这样使用计算属性的 const publishedBooksMessage = computed(() => {

深碍√TFBOYSˉ_/ 2024年04月01日 18:23/ 0 赞/ 50 阅读

相关【Vue3 从入门到实战进阶式掌握完整知识体系】034-Composition API：computed方法生成计算属性

文章目录 5、computed方法生成计算属性简单使用运行结果计算属性内使用get和se

╰半夏微凉°/ 2023年10月03日 09:48/ 0 赞/ 10 阅读

相关 Composition API 和 computed方法生成计算属性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

素颜马尾好姑娘i/ 2023年01月22日 12:47/ 0 赞/ 2 阅读

相关计算属性——computed

vuex的state与vue的data都是用户存放数据的地方，如果我们将vuex的数据直接赋值给data然后再页面使用数据，那么vuex的数据发生变化视图不会更新，那么这个时候

r囧r小猫/ 2022年12月21日 03:17/ 0 赞/ 129 阅读

相关 Vue 计算属性 Computed

基础布局 <div id="example"> <p>Original message: "{ { message }}"</p> <p>Co

喜欢ヅ旅行/ 2022年12月05日 10:19/ 0 赞/ 232 阅读

相关 vue计算属性computed

computed属性计算 new Vue({ el:"", data:{ }, methods:{ }, watch:{

谁借莪１个温暖的怀抱￠/ 2022年11月29日 12:15/ 0 赞/ 230 阅读

相关计算属性computed

[vue官方文档：计算属性][vue] 计算属性和方法的区别第 1 章：计算属性的基本用法 <template> <div class="com

旧城等待，/ 2022年11月02日 00:57/ 0 赞/ 211 阅读

相关 vue-计算属性computed

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta

深藏阁楼爱情的钟/ 2022年07月12日 14:55/ 0 赞/ 245 阅读

相关计算属性computed和侦听器watch

计算属性和侦听器 [计算属性][Link 1] > 个人理解： > > computed用来监控自己定义的变量，该变量不在data里面声明，直接在com

淡淡的烟草味﹌/ 2022年03月25日 02:59/ 0 赞/ 315 阅读

相关 Vue中计算属性computed和方法的区别

Vue中计算属性computed和方法的区别计算属性conputed和设置一个方法得到的最终结果尽管是一样，的，但是区别在于：计算属性是基于它们的响应式依赖进行缓存

淩亂°似流年/ 2021年09月07日 07:32/ 0 赞/ 438 阅读