微信小程序實現類似Vue中的computed、watch功能

微信小程序實現類似Vue中的computed、watch功能

    • 構建npm
    • 使用

構建npm

  1. 創建包管理器
    進入小程序后,打開終端,點擊頂部“視圖” - “終端”
    在這里插入圖片描述
    新建終端
    在這里插入圖片描述
    使用 npm init -y初始化包管理器,生成一個package.json文件
    在這里插入圖片描述

  2. 安裝 npm 包

    npm install --save miniprogram-computed
    
  3. 構建npm
    點擊開發者工具中的菜單欄:工具 --> 構建 npm
    在這里插入圖片描述

使用

在自定義組件中,以require的方式引入

  1. computed 基本用法
    const computedBehavior = require('miniprogram-computed').behavior
    Component({behaviors: [computedBehavior],data: {a: 1,b: 1,},computed: {sum(data) {// 注意: computed 函數中不能訪問 this ,只有 data 對象可供訪問// 這個函數的返回值會被設置到 this.data.sum 字段中return data.a + data.b},},methods: {onTap() {this.setData({a: this.data.b,b: this.data.a + this.data.b,})},},
    })
    
  2. watch 基本用法
    const computedBehavior = require('miniprogram-computed').behaviorComponent({behaviors: [computedBehavior],data: {a: 1,b: 1,sum: 2,},watch: {'a, b': function (a, b) {this.setData({sum: a + b,})},},methods: {onTap() {this.setData({a: this.data.b,b: this.data.a + this.data.b,})},},
    })
    

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/165750.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/165750.shtml
英文地址,請注明出處:http://en.pswp.cn/news/165750.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Java Web 實戰 21 - 用 Servlet 實現一個Hello World

用 Servlet 來寫一個 Hello World~ 一 . 基本部署方式1.1 創建 Servlet 項目1.2 引入依賴1.3 創建目錄1.4 編寫代碼繼承 HttpServlet重寫 doGet 方法刪除 super 方法加上 WebServlet 注解寫業務邏輯 1.5 打包1.6 部署1.7 驗證1.8 小結 二 . 更方便的部署方式2.1 Smart Tomcat 的…

【docker】安裝redis和mysql生產實戰

docker安裝諸如redis,mysql等程序非常方便,但是如果不是為了學習,生產環境的部署還是要注意很多問題的 mysql docker pull mysql:5.7mkdir -p /usr/docker/mysql/{conf,logs,data}docker run -d -p 3306:3306 --privilege

ORA-28003: password verification for the specified password failed,取消oracl密碼復雜度

自己在測試環境想要使自己的Oracle數據庫用戶使用簡單的密碼方便測試,結果指定密碼的密碼驗證失敗 SQL> alter user zzw identified by zzw; alter user zzw identified by zzw * ERROR at line 1: ORA-28003: password verification for the specified password…

本地部署 ComfyUI

本地部署 ComfyUI ComfyUI 介紹ComfyUI Github 地址部署 ComfyUI配置模型地址 or 下載模型啟動 ComfyUI訪問 ComfyUI ComfyUI 介紹 最強大、模塊化的穩定擴散 GUI 和后端。 該用戶界面將允許您使用基于圖形/節點/流程圖的界面設計和執行高級穩定擴散管道。 ComfyUI Github 地…

用戶運營常用的ChatGPT通用提示詞模板

如何建立和完善用戶運營體系,提高用戶滿意度和忠誠度? 如何制定有效的用戶獲取和留存策略,提高用戶生命周期價值? 如何運用多種渠道和平臺進行用戶運營,提高用戶參與度和互動性? 如何建立和維護用戶社群…

第五天 用Python批量處理Excel文件,實現自動化辦公

用Python批量處理Excel文件,實現自動化辦公 一、具體需求 有以下N個表,每個表的結構一樣,如下: 需要把所有表數據匯總,把每個人的得分、積分分別加起來,然后按總積分排名,總積分一致時&#xff…

小程序可拖拽按鈕

你有沒有遇到過在頁面中有一個固定在某個位置的按鈕,永遠的擋住了你想要看的區域? 在小程序的列表頁面中,常常會有一個提報的入口固定在右下角,如果這個按鈕不可拖動的話,可能會擋住下面的事件,讓用戶操作起…

云端導覽,數字互動 | 拓世法寶AI數字人一體機助力全新旅游時代

《中國旅行消費趨勢洞察白皮書(2023版)》顯示,消費者旅行習慣已從“到此一游”變為“深度在地”,更強調在旅游中充實自我、學習新知識。 (《中國旅行消費趨勢洞察白皮書(2023版》截圖) 從這些資…

C++標準模板(STL)- 類型支持 (類型修改,從給定類型移除引用,std::remove_reference)

類型特性 類型特性定義一個編譯時基于模板的結構&#xff0c;以查詢或修改類型的屬性。 試圖特化定義于 <type_traits> 頭文件的模板導致未定義行為&#xff0c;除了 std::common_type 可依照其所描述特化。 定義于<type_traits>頭文件的模板可以用不完整類型實例…

Springboot整合MybatisPlus及分頁功能

1 引入pom <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot</artifactId><version>2.7.14</version> </dependency> <dependency><groupId>com.baomidou</groupId><a…

【Vue】Vue3 配置全局 scss 變量

variables.scss $color: #0c8ce9;vite.config.ts // 全局css變量css: {preprocessorOptions: {scss: {additionalData: import "/styles/variables.scss";,},},},.vue 文件使用

讀書筆記:彼得·德魯克《認識管理》第33章 管理者與管理科學

一、章節內容概述 把管理科學的潛力轉變為績效&#xff0c;主要取決于管理者。要做到這一點&#xff0c;管理者必須理解管理科學是什么以及能夠做什么。管理者必須明白&#xff0c;管理科學固有的特殊局限性在很大程度上源于自身的起源和歷史。但最重要的是&#xff0c;管理者…

Java大型電商項目——品優購(一)

視頻教程&#xff1a;【黑馬程序員】Java大型電商項目—品優購【配套源碼筆記】_嗶哩嗶哩_bilibili源碼下載&#xff1a; 鏈接&#xff1a;https://pan.baidu.com/s/1fECz5In_XCB-aW6ed6ZTbA 提取碼&#xff1a;27xa 技術選型&#xff1a; 后端框架&#xff1a;SpringSprin…

多功能回饋式交流電子負載的應用

多功能回饋式交流電子負載是用于模擬和測試電源、電池等電子設備的負載工具。它具有多種應用&#xff0c;可以用于測試和評估各種類型的電源&#xff0c;包括直流電源和交流電源。它可以模擬各種負載條件&#xff0c;如恒定電流、恒定電壓和恒定功率&#xff0c;以驗證電源的性…

小葉子鋼琴智能陪練 助力打牢鋼琴基礎

孩子在練琴過程中&#xff0c;經常會出現錯音錯節奏&#xff0c;為了能夠幫助她更高效的練琴&#xff0c;最近開始使用智能鋼琴陪練工具——小葉子鋼琴智能陪練。 身邊也有很多朋友在用這款應用&#xff0c;它比較知名的功能就是三大練琴模式&#xff0c;也就是識譜模式、提升…

linux centos系統命令安裝

Zip unzip 命令安裝下載 centos 命令常用常用下載 https://rpmfind.net/linux/rpm2html/search.php?queryzip%28x86-64%29&submitSearch…&system&arch 在線安裝zip命令 Centos用yum安裝的話用下面的命令安裝 yum install -y unzip zipUbuntu的的系統可以用下…

java SpringCloud版本b2b2c鴻鵠云商平臺全套解決方案 小程序商城免費搭建

使用技術&#xff1a; Spring CloudSpring BootMybatis微服務服務監控可視化運營 B2B2C平臺&#xff1a; 平臺管理端(包含自營) 商家平臺端(多商戶入駐) PC買家端、手機wap/公眾號買家端 微服務&#xff08;30個通用微服務如&#xff1a;商品、訂單、購物車、個人中心、支…

Ubuntu20.04清理垃圾vscode緩存

使用VM虛擬機安裝了Ubuntu系統&#xff0c;主目錄空間越來越小&#xff0c;硬盤擴容之后很快又空間不足&#xff0c;甚至出現了開機卡黑屏的情況&#xff0c;這里記錄一下解決過程。 1 重新開機進入系統 狀態&#xff1a;卡到了開機黑屏狀態&#xff0c;左上角有一條小橫杠 原…

國外網站文章或網頁采集翻譯為中文

采集國外網站的文章或網頁數據&#xff08;例如英文&#xff0c;西班牙語&#xff0c;法語等&#xff09;&#xff0c;怎么快速批量翻譯為中文&#xff1f; 可以使用簡數采集器來實現&#xff0c;支持自動翻譯&#xff0c;同時翻譯為多種語言&#xff08;不僅中文&#xff09;…

Angular11 MSAL B2C登錄實例 (二)

前言 上文介紹了在app.module.ts里的配置&#xff0c;本文著重講解下在app-routing.module.ts和index.html里的設置。 步驟 在文件中主要需要添加以下代碼 app-routing.module.ts const initialNavigation (!BrowserUtils.isInIframe() && !BrowserUtils.isInPopup…