Vue3中根據select得選項值,改變當前元素同級下的子元素得disabled屬性值

在 Vue 3 中,你通常不會直接通過類名(或任何其他 DOM 選擇器)來獲取 DOM 元素,因為 Vue 鼓勵你使用數據驅動視圖的方式來更新和操作元素。然而,如果你確實需要訪問 DOM 元素(這通常是不推薦的,除非有特別的原因),你可以使用 Vue 3 的 ref 或者 refs(在模板中使用 ref 指令時,它們會在組件的 $refs 對象中作為響應式引用存在)。

但是,你不能直接使用類名來獲取 ref。你需要顯式地為每個你想要訪問的 DOM 元素添加一個 ref

由于沒有引用jquery組件,不能使用class類名來查找改變元素得disabled屬性,受用ref吧,有幾個ref,就要先定義幾個ref,對于動態生成得多個select來說,不合適,那咋么辦呢

其實,在 Vue 中,當你需要根據一個 select 的值來改變同級 inputdisabled 狀態時,你可以使用 v-model 來雙向綁定 select 的值,并使用計算屬性或方法來根據這個值設置 inputdisabled 狀態。

因為 input 的 disabled 狀態是響應式的 ,當select 值改變后,會自動相應到

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

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

相關文章

Python 入門 —— 面向對象編程

Python 入門 —— 面向對象編程 面向對象編程是一種編程范式,通過將對象作為程序的基本單元,每個對象之間可以相互傳遞信息,并通過各自的方法對信息進行處理,從而達到程序處理的目的。 而面向過程編程則是將程序視為一系列順序執…

低代碼:釋放企業創新力的鑰匙

近年來,隨著信息技術的不斷發展,企業對于快速開發應用程序的需求越來越迫切。然而,傳統的軟件開發過程常常耗時費力,限制了企業的創新潛力。于是,低代碼應運而生,成為解決開發難題的一把利器。 低代碼開發…

你了解RabbitMQ、RocketMQ和Kafka嗎?

是的,我了解 RabbitMQ、RocketMQ 和 Kafka。以下是對這三種消息隊列系統的詳細介紹: RabbitMQ 概念 RabbitMQ 是一個由 Pivotal 開發的開源消息代理,基于 AMQP(Advanced Message Queuing Protocol)協議。它支持多種…

智能聊天AI機器人網頁怎么聊?這樣做很簡單

智能聊天AI機器人網頁怎么聊?隨著科技的飛速發展,智能聊天AI機器人已經逐漸滲透到我們的日常生活中,為我們提供了更加便捷、高效的交流方式。在網頁上,這些智能聊天機器人以其獨特的魅力,為我們打開了與機器對話的新世…

Epic商店登錄時一直轉圈圈怎么回事?Epic登錄轉圈圈解決辦法

很多游戲玩家都喜歡在Epic商店上面免費領取游戲,但是經常在登陸領取的過程中,遇到Epic賬號登陸不上的問題,登陸界面一直轉圈圈,下面分享一下具體解決辦法,幫助大家順利流暢登陸,輕松喜加一。 如果遇到Epic商…

低內阻、高性能數字音頻功放芯片-NTP8938

由工采網代理的韓國NF(耐福)NTP8938是一款支持2X30W低內阻、高性能數字音頻功放芯片;采用QFN40封裝,芯片內置DSP集成了多功能數字音頻信號處理功能,高性能,高保真。 芯片工作電壓范圍:5V&#x…

python實現可視化大屏(django+pyechars)

1.實現效果圖 2.對數據庫進行遷移 python manage.py makemigrations python manage.py migrate 3.登錄頁面 {% load static%} <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport"…

ffmpeg將mp4轉換為swf

文章目錄 ffmpeg安裝、配置java運行報錯 Cannot run program "ffmpeg" ffmpeg命令mp4轉為swf示例 ### ffmpeg -i input.mkv -b:v 600 -c:v libx264 -vf scale1920:1080 -crf 10 -ar 48000 -r 24 output.swfmkv轉為swf示例 其他文檔命令參數簡介 需要將mp4轉換為swf&a…

【回溯算法題記錄】組合總和題匯總

組合總和 39. 組合總和題目描述初始思路后續分析 40. 組合總和 II題目描述思路&#xff08;參考代碼隨想錄&#xff09; 39. 組合總和 題目&#x1f517; 題目描述 給你一個 無重復元素 的整數數組 candidates 和一個目標整數 target &#xff0c;找出 candidates 中可以使數…

3d渲染軟件有哪些(2),渲染100邀請碼1a12

3D渲染軟件有很多&#xff0c;上次我們介紹了幾個&#xff0c;這次我們接著介紹。 1、Arnold Arnold渲染器是一款基于物理算法的電影級渲染引擎&#xff0c;它具有渲染質量高、材質系統豐富、渲染速度快等特點&#xff0c;是3D設計師的極佳選擇。2、Octane Render Octane Ren…

[Gstreamer] gstbasesink 里的 jitter

gstbasesink 里有一個值是 jitter &#xff0c;直譯為抖動。這個值表示當前到達 gstbasesink chain 函數(push mode) 的 GstBuffer 的系統事件 與 這個 buffer 被期望到達的系統時間的差值。 如果 jitter 是整數&#xff0c;則表示 GstBuffer 到晚了&#xff0c;當前 GstBuffer…

HJI與HJB

問題描述 設連續系統狀態方程和性能指標 X ˙ f ( t , X , U ) X ( t 0 ) X 0 J ? [ X ( t f ) , t f ] ∫ t 0 t f F ( X , U , t ) d t \begin{aligned} \dot{X} & f(t, X, U) \quad X\left(t_{0}\right)X_{0} \\ J & \phi\left[X\left(t_{f}\right), t_{f}\r…

【全網最完整】Open CASCADE Technology (OCCT) 構建項目,QT可視化操作,添加自定義測試內容

前言 本文為了記錄自己在實習的過程中&#xff0c;學習到的有關OCCT開源項目的搭建工作&#xff0c;旨在教會小白從0開始下載開源項目及環境搭配&#xff0c;以及如何添加自定義測試內容&#xff0c;最終結果展示如下&#xff1a; 1、項目下載 本項目共需要使用四個工具&#…

如何快速解決驗證碼圖像問題 | 最佳圖像(OCR)驗證碼解決工具

你是否曾經遇到過陷入一個看似無盡的 CAPTCHA 挑戰中&#xff0c;努力識別扭曲的字符或數字&#xff1f;這些令人抓狂的 CAPTCHA 是為了確保你是人類而不是機器人&#xff0c;但它們也給真正的用戶帶來了頭痛。那么&#xff0c;有沒有快速解決這些 CAPTCHA 圖像的方法&#xff…

2021年12月電子學會青少年軟件編程 中小學生Python編程等級考試三級真題解析(判斷題)

2021年12月Python編程等級考試三級真題解析 判斷題&#xff08;共10題&#xff0c;每題2分&#xff0c;共20分&#xff09; 26、在Python中&#xff0c;0x100010表示十六進制數100010 答案&#xff1a;對 考點分析&#xff1a;考查進制轉換&#xff0c;十六進制數1??0x開頭…

Flask之數據庫

前言&#xff1a;本博客僅作記錄學習使用&#xff0c;部分圖片出自網絡&#xff0c;如有侵犯您的權益&#xff0c;請聯系刪除 目錄 一、數據庫的分類 1.1、SQL 1.2、NoSQL 1.3、如何選擇&#xff1f; 二、ORM魔法 三、使用Flask-SQLALchemy管理數據庫 3.1、連接數據庫服…

移動互聯網應用程序(APP)信息安全等級保護測評標準解讀

隨著移動互聯網的迅猛發展&#xff0c;移動應用(App)已成為個人信息處理與交互的主要渠道&#xff0c;其安全性直接關系到國家安全、社會穩定以及用戶個人隱私權益。為加強移動App的信息安全管理&#xff0c;國家標準化管理委員會正式發布了GB/T 42582-2023《信息安全技術 移動…

等保2.0時,最常見的挑戰是什么?

等保2.0的常見挑戰 等保2.0&#xff08;網絡安全等級保護2.0&#xff09;是中國網絡安全領域的基本制度&#xff0c;它對信息系統進行分級分類、安全保護和安全測評&#xff0c;以提高信息系統的安全性和可信性。在等保2.0的實施過程中&#xff0c;企業和組織面臨多方面的挑戰&…

寵物領養救助管理系帶萬字文檔java項目基于springboot+vue的寵物管理系統java課程設計java畢業設計

文章目錄 寵物領養救助管理系統一、項目演示二、項目介紹三、萬字項目文檔四、部分功能截圖五、部分代碼展示六、底部獲取項目源碼帶萬字文檔&#xff08;9.9&#xffe5;帶走&#xff09; 寵物領養救助管理系統 一、項目演示 寵物領養救助系統 二、項目介紹 基于springbootv…

一站式BI解決方案:從數據采集到處理分析,全面滿足決策支持需求

在數字化浪潮席卷全球的今天&#xff0c;數據已成為企業決策的核心驅動力。然而&#xff0c;面對海量的數據和復雜的分析需求&#xff0c;企業如何高效地收集、整理、分析和利用這些數據&#xff0c;以支持戰略決策和業務優化&#xff0c;成為了一個亟待解決的問題。為了解決這…