当前位置：首页 > 文章列表 > 文章 > 前端 > CSS只读与可编辑表单样式区分技巧

CSS只读与可编辑表单样式区分技巧

2026-05-25 11:55:14 0浏览收藏

本文深入解析了CSS中`:read-only`和`:read-write`伪类的正确用法与常见误区，强调它们仅依据HTML原生`readonly`属性或`contenteditable`状态自动匹配样式，完全无视JavaScript层面的禁用逻辑（如`preventDefault`或`oninput`拦截），并明确限定支持的元素类型与布尔属性书写规范；同时揭示了与`:disabled`混用时的优先级陷阱、浏览器兼容性差异，以及动态场景下应优先采用CSS类而非频繁操作`readonly`属性的工程实践建议——帮你用纯CSS精准、高效、语义化地区分表单的只读与可编辑状态。

CSS伪类:read-only与:read-write_只读表单项的样式区分

怎么用 :read-only 和 :read-write 给输入框加不同样式

这两个伪类能直接区分表单项是否可编辑，不用 JS 监听状态或手动加 class。关键在于：浏览器只根据元素的 readonly 属性（或 disabled 状态）自动匹配，不看 JavaScript 是否禁用了输入逻辑。

常见错误是以为给加了 oninput="return false" 或绑了 preventDefault 就算“只读”——不行，伪类完全不认这些，只看原生属性。

:read-only 匹配带 readonly 属性的、</code>，以及没有 <code>contenteditable</code> 或设为 <code>false</code> 的元素</li> <li><code>:read-write</code> 匹配没设 <code>readonly</code>、也没被 <code>disabled</code> 的可编辑表单控件，以及 <code>contenteditable="true"</code> 元素</li> <li><code>disabled</code> 元素既不匹配 <code>:read-only</code> 也不匹配 <code>:read-write</code>，它走自己的 <code>:disabled</code> 逻辑</li> </ul><h3>:read-only 不生效？检查这三处硬性条件</h3> <p>伪类失效最常因为 HTML 属性写法不对、元素类型不支持，或被更高优先级样式覆盖。</p> <ul><li>必须用布尔属性写法：<code><input readonly></code>，不能写 <code>readonly="false"</code> 或 <code>readonly=""</code>（空字符串也表示 true）</li> <li><code><select></code> 和 <code><button></code> 不支持 <code>:read-only</code>，哪怕加了 <code>readonly</code> 属性也无效；只有 <code><input></code>（除 <code>type="hidden"</code>）、<code><textarea></code>、<code>contenteditable</code> 元素可用</li> <li>如果用了 <code>!important</code> 覆盖了伪类样式，或者父元素有 <code>pointer-events: none</code>，视觉上像“没生效”，其实是交互被拦了</li> </ul><h3>和 :disabled 混用时的样式优先级陷阱</h3> <p><code>:disabled</code> 的权重天然高于 <code>:read-only</code>，哪怕你把 <code>:read-only</code> 写在后面，只要元素同时满足两个条件（比如既有 <code>readonly</code> 又有 <code>disabled</code>），<code>:disabled</code> 样式一定胜出。</p> <p>但现实中，<code>disabled</code> 和 <code>readonly</code> 语义完全不同：<code>disabled</code> 字段不提交、不可聚焦；<code>readonly</code> 字段会提交、能聚焦、只是不能改。所以别让两者共存——要么用 <code>readonly</code> 做“展示+可复制”，要么用 <code>disabled</code> 做“彻底锁定”。</p> <ul><li>想让只读输入框看起来灰但还能选中复制？用 <code>:read-only { background: #f5f5f5; color: #666; }</code></li> <li>想让禁用按钮不可点且变灰？必须用 <code>:disabled</code>，<code>:read-only</code> 对 <code><button></code> 完全无效</li> <li>Chrome 和 Safari 对 <code>contenteditable</code> 元素的 <code>:read-write</code> 支持较稳；Firefox 旧版本可能漏掉某些情况</li> </ul><h3>为什么不要用 JS 动态切换 readonly 属性来触发样式变化</h3> <p>虽然 JS 改 <code>element.readonly = true</code> 确实会触发 <code>:read-only</code> 生效，但容易踩两个坑：</p> <ul><li>React/Vue 等框架里直接操作 DOM 属性，可能绕过响应式系统，导致视图与状态不一致；更稳妥的是用受控组件 + 条件 class</li> <li>批量操作多个输入框时，频繁设/删 <code>readonly</code> 属性会触发重排，尤其在表格或列表中滚动时卡顿明显</li> <li>真正需要动态只读逻辑的场景（比如根据权限开关编辑），建议用 class 控制（如 <code>.is-readonly</code>），再用 CSS 规则模拟行为：<code>.is-readonly input { pointer-events: none; opacity: 0.7; }</code></li> </ul><p>伪类适合静态、语义明确的只读状态；动态逻辑交给 class + JS 更可控。</p><p>今天关于《CSS只读与可编辑表单样式区分技巧》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！</p> </div> <div class="labsList"> </div> <div class="cateBox"> <div class="cateItem"> <a href="/article/610974.html" title="Firebase 连接非默认 Firestore 方法" class="img_box"> <img src="/uploads/6110/965005e6b92cc9c6ec2a0b5797cbdc40.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="Firebase 连接非默认 Firestore 方法">Firebase 连接非默认 Firestore 方法 </a> <dl> <dt class="lineOverflow"><a href="/article/610974.html" title="Firebase 连接非默认 Firestore 方法" class="aBlack">上一篇<i></i></a></dt> <dd class="lineTwoOverflow">Firebase 连接非默认 Firestore 方法</dd> </dl> </div> <div class="cateItem"> <a href="/article/610976.html" title="Win7选区截图快捷键有哪些" class="img_box"> <img src="/uploads/20260525/17796813756a13c85fc3f24.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="Win7选区截图快捷键有哪些"> </a> <dl> <dt class="lineOverflow"><a href="/article/610976.html" class="aBlack" title="Win7选区截图快捷键有哪些">下一篇<i></i></a></dt> <dd class="lineTwoOverflow">Win7选区截图快捷键有哪些</dd> </dl> </div> </div> </div> </div> <div class="leftContBox pt0"> <div class="pdl20"> <div class="contTit"> <a href="/articlelist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit">最新文章</div> </div> </div> <ul class="newArticleList"> <li> <div class="contBox"> <a href="/article/625701.html" class="img_box" title="JavaScript Promise.all 失败后为什么其他请求仍可能继续"> <img src="/uploads/20260909/1788955821-a1d9e9976c-630477cc45-promise-all-cancellation-coordination.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="JavaScript Promise.all 失败后为什么其他请求仍可能继续"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 3小时前 | <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> · <a href="/articletag/40974_new_0_1.html" class="aLightGray" title="Fetch API">Fetch API</a> · <a href="/articletag/41072_new_0_1.html" class="aLightGray" title="Promise">Promise</a> · <a href="/articletag/41243_new_0_1.html" class="aLightGray" title="异步控制">异步控制</a> · <a href="javascript:;" class="aLightGray" title="JavaScript">JavaScript</a> <a href="javascript:;" class="aLightGray" title="Fetch">Fetch</a> <a href="javascript:;" class="aLightGray" title="Promise.all">Promise.all</a> <a href="javascript:;" class="aLightGray" title="AbortController">AbortController</a> <a href="javascript:;" class="aLightGray" title="AbortSignal">AbortSignal</a> <a href="javascript:;" class="aLightGray" title="并发请求取消">并发请求取消</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/625701.html" class="aBlack" target="_blank" title="JavaScript Promise.all 失败后为什么其他请求仍可能继续">JavaScript Promise.all 失败后为什么其他请求仍可能继续</a> </dt> <dd class="cont2"> <span><i class="view"></i>347浏览</span> <span class="collectBtn user_collection" data-id="625701" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/625673.html" class="img_box" title="CSS position sticky 不生效时先检查哪个滚动容器"> <img src="/uploads/20260909/1788951444-d901d502e9-4e8a22dcc5-sticky-layout-constraints.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSS position sticky 不生效时先检查哪个滚动容器"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 4小时前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/625673.html" class="aBlack" target="_blank" title="CSS position sticky 不生效时先检查哪个滚动容器">CSS position sticky 不生效时先检查哪个滚动容器</a> </dt> <dd class="cont2"> <span><i class="view"></i>241浏览</span> <span class="collectBtn user_collection" data-id="625673" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/625653.html" class="img_box" title="CSS @container style query 和 size query 怎么区分"> <img src="/uploads/20260909/1788937877-1a02b021a2-378b30fd4e-container-size-domain.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSS @container style query 和 size query 怎么区分"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 8小时前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/625653.html" class="aBlack" target="_blank" title="CSS @container style query 和 size query 怎么区分">CSS @container style query 和 size query 怎么区分</a> </dt> <dd class="cont2"> <span><i class="view"></i>158浏览</span> <span class="collectBtn user_collection" data-id="625653" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/625628.html" class="img_box" title="Web Component 自定义元素何时适合放到 connectedCallback"> <img src="/uploads/20260909/1788928193-ed68694c2b-69823369bc-connected-callback-boundary.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="Web Component 自定义元素何时适合放到 connectedCallback"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 10小时前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/625628.html" class="aBlack" target="_blank" title="Web Component 自定义元素何时适合放到 connectedCallback">Web Component 自定义元素何时适合放到 connectedCallback</a> </dt> <dd class="cont2"> <span><i class="view"></i>484浏览</span> <span class="collectBtn user_collection" data-id="625628" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/625603.html" class="img_box" title="IndexedDB object store 没有索引时怎么优化按字段查询"> <img src="/uploads/20260909/1788923923-611070052e-cfce535e00-indexeddb-keyrange-query-structure.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="IndexedDB object store 没有索引时怎么优化按字段查询"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 12小时前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/625603.html" class="aBlack" target="_blank" title="IndexedDB object store 没有索引时怎么优化按字段查询">IndexedDB object store 没有索引时怎么优化按字段查询</a> </dt> <dd class="cont2"> <span><i class="view"></i>476浏览</span> <span class="collectBtn user_collection" data-id="625603" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/625579.html" class="img_box" title="Web Worker 不能直接改 DOM 时应该如何回传结果"> <img src="/uploads/20260909/1788916798-545b7cf2b6-2554de4eb3-worker-dom-boundary.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="Web Worker 不能直接改 DOM 时应该如何回传结果"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 14小时前 | <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> · <a href="/articletag/41028_new_0_1.html" class="aLightGray" title="Web Worker">Web Worker</a> · <a href="javascript:;" class="aLightGray" title="JavaScript">JavaScript</a> <a href="javascript:;" class="aLightGray" title="dom">dom</a> <a href="javascript:;" class="aLightGray" title="postMessage">postMessage</a> <a href="javascript:;" class="aLightGray" title="Web Worker">Web Worker</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/625579.html" class="aBlack" target="_blank" title="Web Worker 不能直接改 DOM 时应该如何回传结果">Web Worker 不能直接改 DOM 时应该如何回传结果</a> </dt> <dd class="cont2"> <span><i class="view"></i>443浏览</span> <span class="collectBtn user_collection" data-id="625579" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/625556.html" class="img_box" title="AbortController 取消 fetch 后如何避免读取响应体报错"> <img src="/uploads/20260909/1788912742-f6787b4dc7-84e39fc9bb-abortcontroller-request-body-boundary.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="AbortController 取消 fetch 后如何避免读取响应体报错"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 15小时前 | <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> · <a href="/articletag/40974_new_0_1.html" class="aLightGray" title="Fetch API">Fetch API</a> · <a href="/articletag/40975_new_0_1.html" class="aLightGray" title="异步请求">异步请求</a> · <a href="javascript:;" class="aLightGray" title="Fetch">Fetch</a> <a href="javascript:;" class="aLightGray" title="AbortController">AbortController</a> <a href="javascript:;" class="aLightGray" title="响应体">响应体</a> <a href="javascript:;" class="aLightGray" title="Response.json">Response.json</a> <a href="javascript:;" class="aLightGray" title="AbortError">AbortError</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/625556.html" class="aBlack" target="_blank" title="AbortController 取消 fetch 后如何避免读取响应体报错">AbortController 取消 fetch 后如何避免读取响应体报错</a> </dt> <dd class="cont2"> <span><i class="view"></i>248浏览</span> <span class="collectBtn user_collection" data-id="625556" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/625532.html" class="img_box" title="Fetch API 读取响应 JSON 失败时怎么保留原始文本"> <img src="/uploads/20260909/1788908251-a837de10b3-fc0bc96706-fetch-response-clone-branches.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="Fetch API 读取响应 JSON 失败时怎么保留原始文本"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 16小时前 | <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/40493_new_0_1.html" class="aLightGray" title="接口排错">接口排错</a> · <a href="/articletag/40974_new_0_1.html" class="aLightGray" title="Fetch API">Fetch API</a> · <a href="/articletag/41573_new_0_1.html" class="aLightGray" title="JSON解析">JSON解析</a> · <a href="javascript:;" class="aLightGray" title="JSON.parse">JSON.parse</a> <a href="javascript:;" class="aLightGray" title="Fetch API">Fetch API</a> <a href="javascript:;" class="aLightGray" title="Response.json">Response.json</a> <a href="javascript:;" class="aLightGray" title="Response.text">Response.text</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/625532.html" class="aBlack" target="_blank" title="Fetch API 读取响应 JSON 失败时怎么保留原始文本">Fetch API 读取响应 JSON 失败时怎么保留原始文本</a> </dt> <dd class="cont2"> <span><i class="view"></i>339浏览</span> <span class="collectBtn user_collection" data-id="625532" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/625508.html" class="img_box" title="Next.js Server Action 返回校验错误时怎么保留表单状态"> <img src="/uploads/20260909/1788902129-4382cf72ac-f14e1eb9fd-server-action-state-boundary.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="Next.js Server Action 返回校验错误时怎么保留表单状态"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 18小时前 | <a href="/articletag/8921_new_0_1.html" class="aLightGray" title="react">react</a> · <a href="/articletag/12714_new_0_1.html" class="aLightGray" title="next.js">next.js</a> · <a href="/articletag/39947_new_0_1.html" class="aLightGray" title="表单校验">表单校验</a> · <a href="javascript:;" class="aLightGray" title="Next.js">Next.js</a> <a href="javascript:;" class="aLightGray" title="表单状态">表单状态</a> <a href="javascript:;" class="aLightGray" title="Server Action">Server Action</a> <a href="javascript:;" class="aLightGray" title="useActionState">useActionState</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/625508.html" class="aBlack" target="_blank" title="Next.js Server Action 返回校验错误时怎么保留表单状态">Next.js Server Action 返回校验错误时怎么保留表单状态</a> </dt> <dd class="cont2"> <span><i class="view"></i>308浏览</span> <span class="collectBtn user_collection" data-id="625508" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/625496.html" class="img_box" title="IntersectionObserver 回调频繁触发时怎么减少重复加载"> <img src="/uploads/20260909/1788900036-b5aeb66228-5ec28c889f-intersectionobserver-callback-boundary.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="IntersectionObserver 回调频繁触发时怎么减少重复加载"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 18小时前 | <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/729_new_0_1.html" class="aLightGray" title="性能优化">性能优化</a> · <a href="/articletag/39812_new_0_1.html" class="aLightGray" title="IntersectionObserver">IntersectionObserver</a> · <a href="/articletag/39909_new_0_1.html" class="aLightGray" title="懒加载">懒加载</a> · <a href="javascript:;" class="aLightGray" title="懒加载">懒加载</a> <a href="javascript:;" class="aLightGray" title="重复请求">重复请求</a> <a href="javascript:;" class="aLightGray" title="IntersectionObserver">IntersectionObserver</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/625496.html" class="aBlack" target="_blank" title="IntersectionObserver 回调频繁触发时怎么减少重复加载">IntersectionObserver 回调频繁触发时怎么减少重复加载</a> </dt> <dd class="cont2"> <span><i class="view"></i>154浏览</span> <span class="collectBtn user_collection" data-id="625496" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/625472.html" class="img_box" title="Service Worker 更新后旧缓存不消失怎么设计版本清理"> <img src="/uploads/20260909/1788895490-a62f3f75e1-fe65a51c92-sw-activate-cleanup-map.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="Service Worker 更新后旧缓存不消失怎么设计版本清理"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 20小时前 | <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/322_new_0_1.html" class="aLightGray" title="缓存">缓存</a> · <a href="/articletag/10234_new_0_1.html" class="aLightGray" title="pwa">pwa</a> · <a href="/articletag/14884_new_0_1.html" class="aLightGray" title="Service Worker">Service Worker</a> · <a href="javascript:;" class="aLightGray" title="Service Worker">Service Worker</a> <a href="javascript:;" class="aLightGray" title="Cache Storage">Cache Storage</a> <a href="javascript:;" class="aLightGray" title="前端缓存更新">前端缓存更新</a> <a href="javascript:;" class="aLightGray" title="PWA缓存">PWA缓存</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/625472.html" class="aBlack" target="_blank" title="Service Worker 更新后旧缓存不消失怎么设计版本清理">Service Worker 更新后旧缓存不消失怎么设计版本清理</a> </dt> <dd class="cont2"> <span><i class="view"></i>127浏览</span> <span class="collectBtn user_collection" data-id="625472" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/625448.html" class="img_box" title="Vue computed 里修改依赖值为什么会造成循环更新"> <img src="/uploads/20260909/1788891126-ae1e3036af-b26cabcada-computed-dependency-loop.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="Vue computed 里修改依赖值为什么会造成循环更新"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 21小时前 | <a href="/articletag/17126_new_0_1.html" class="aLightGray" title="watch">watch</a> · <a href="/articletag/42650_new_0_1.html" class="aLightGray" title="computed">computed</a> · <a href="/articletag/43149_new_0_1.html" class="aLightGray" title="Vue教程">Vue教程</a> · <a href="/articletag/43150_new_0_1.html" class="aLightGray" title="前端响应式">前端响应式</a> · <a href="javascript:;" class="aLightGray" title="VUE">VUE</a> <a href="javascript:;" class="aLightGray" title="watch">watch</a> <a href="javascript:;" class="aLightGray" title="computed">computed</a> <a href="javascript:;" class="aLightGray" title="循环更新">循环更新</a> <a href="javascript:;" class="aLightGray" title="响应式依赖">响应式依赖</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/625448.html" class="aBlack" target="_blank" title="Vue computed 里修改依赖值为什么会造成循环更新">Vue computed 里修改依赖值为什么会造成循环更新</a> </dt> <dd class="cont2"> <span><i class="view"></i>352浏览</span> <span class="collectBtn user_collection" data-id="625448" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> </ul> </div> </div> <div class="mainRight">  <div class="rightContBox" style="margin-top: 0px;"> <div class="rightTit"> <a href="/courselist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit lineOverflow">课程推荐</div> </div> <ul class="lessonRecomRList"> <li> <a href="/course/9.html" class="img_box" target="_blank" title="前端进阶之JavaScript设计模式"> <img src="/uploads/20221222/52fd0f23a454c71029c2c72d206ed815.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="前端进阶之JavaScript设计模式"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/9.html" target="_blank" class="aBlack" title="前端进阶之JavaScript设计模式">前端进阶之JavaScript设计模式</a></dt> <dd class="cont1 lineTwoOverflow"> 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。 </dd> <dd class="cont2">543次学习</dd> </dl> </li> <li> <a href="/course/2.html" class="img_box" target="_blank" title="GO语言核心编程课程"> <img src="/uploads/20221221/634ad7404159bfefc6a54a564d437b5f.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="GO语言核心编程课程"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/2.html" target="_blank" class="aBlack" title="GO语言核心编程课程">GO语言核心编程课程</a></dt> <dd class="cont1 lineTwoOverflow"> 本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。 </dd> <dd class="cont2">516次学习</dd> </dl> </li> <li> <a href="/course/74.html" class="img_box" target="_blank" title="简单聊聊mysql8与网络通信"> <img src="/uploads/20240103/bad35fe14edbd214bee16f88343ac57c.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="简单聊聊mysql8与网络通信"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/74.html" target="_blank" class="aBlack" title="简单聊聊mysql8与网络通信">简单聊聊mysql8与网络通信</a></dt> <dd class="cont1 lineTwoOverflow"> 如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让 </dd> <dd class="cont2">500次学习</dd> </dl> </li> <li> <a href="/course/57.html" class="img_box" target="_blank" title="JavaScript正则表达式基础与实战"> <img src="/uploads/20221226/bbe4083bb3cb0dd135fb02c31c3785fb.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="JavaScript正则表达式基础与实战"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/57.html" target="_blank" class="aBlack" title="JavaScript正则表达式基础与实战">JavaScript正则表达式基础与实战</a></dt> <dd class="cont1 lineTwoOverflow"> 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。 </dd> <dd class="cont2">487次学习</dd> </dl> </li> <li> <a href="/course/28.html" class="img_box" target="_blank" title="从零制作响应式网站—Grid布局"> <img src="/uploads/20221223/ac110f88206daeab6c0cf38ebf5fe9ed.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="从零制作响应式网站—Grid布局"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/28.html" target="_blank" class="aBlack" title="从零制作响应式网站—Grid布局">从零制作响应式网站—Grid布局</a></dt> <dd class="cont1 lineTwoOverflow"> 本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。 </dd> <dd class="cont2">485次学习</dd> </dl> </li> </ul> </div> <div class="rightContBox"> <div class="rightTit"> <a href="/ai.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit lineOverflow">AI推荐</div> </div> <ul class="lessonRecomRList"> <li> <a href="/ai/13899.html" target="_blank" title="H2O EvalGPT：开源LLM大模型评估与排行榜工具" class="img_box"> <img src="/uploads/20260908/17887986376a9ee6adaf3f5.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="H2O EvalGPT：开源LLM大模型评估与排行榜工具" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13899.html" class="aBlack" target="_blank" title="H2O EvalGPT">H2O EvalGPT</a></dt> <dd class="cont1 lineTwoOverflow"> H2O EvalGPT是H2O.ai推出的开源LLM评估平台，提供详细的大模型性能排行榜、行业特定基准测试及A/B测试功能，助您快速选择最适合项目的高性能大语言模型。 </dd> <dd class="cont2">52次使用</dd> </dl> </li> <li> <a href="/ai/13892.html" target="_blank" title="SuperCLUE中文大模型评测基准：功能、能力维度与应用指南" class="img_box"> <img src="/uploads/20260831/17881740316a955ecf5901d.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="SuperCLUE中文大模型评测基准：功能、能力维度与应用指南" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13892.html" class="aBlack" target="_blank" title="SuperCLUE">SuperCLUE</a></dt> <dd class="cont1 lineTwoOverflow"> SuperCLUE是权威的中文大语言模型综合评测基准，涵盖语言理解、知识应用、AI Agent智能体及安全性等12项核心能力。通过多轮对话与客观测试，定期发布榜单与技术报告，为模型研发、优化及行业选型提供科学依据。 </dd> <dd class="cont2">204次使用</dd> </dl> </li> <li> <a href="/ai/13891.html" target="_blank" title="C-Eval中文评测基准：大语言模型多学科能力评估指南" class="img_box"> <img src="/uploads/20260902/17883342316a97d09714cfd.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="C-Eval中文评测基准：大语言模型多学科能力评估指南" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13891.html" class="aBlack" target="_blank" title="C-Eval">C-Eval</a></dt> <dd class="cont1 lineTwoOverflow"> 深入了解C-Eval中文评估套件，涵盖52个学科与4级难度。本文详解其功能特点、Zero-shot/Few-shot使用方法及代码示例，助您全面评测LLM中文理解与泛化能力。 </dd> <dd class="cont2">139次使用</dd> </dl> </li> <li> <a href="/ai/13888.html" target="_blank" title="AI Prompt Library：免费AI提示词库，助力ChatGPT高效创作与营销" class="img_box"> <img src="/uploads/20260906/17886942316a9d4ed7bbf53.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="AI Prompt Library：免费AI提示词库，助力ChatGPT高效创作与营销" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13888.html" class="aBlack" target="_blank" title="AI Prompt Library">AI Prompt Library</a></dt> <dd class="cont1 lineTwoOverflow"> 探索AI Prompt Library免费资源库，涵盖营销、写作及多场景AI提示词。兼容ChatGPT、Claude等工具，一键复制优化输出，提升工作效率。 </dd> <dd class="cont2">71次使用</dd> </dl> </li> <li> <a href="/ai/13883.html" target="_blank" title="Generrated：DALL·E 2/3 AI绘画提示词灵感库与图像对比平台" class="img_box"> <img src="/uploads/20260908/17888004336a9eedb167dca.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="Generrated：DALL·E 2/3 AI绘画提示词灵感库与图像对比平台" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13883.html" class="aBlack" target="_blank" title="Generrated">Generrated</a></dt> <dd class="cont1 lineTwoOverflow"> Generrated汇集9300+张DALL·E生成图像及对应提示词，支持查看完整图集、对比DALL·E 2与3版本差异，是AI绘图新手学习Prompt设计与获取创作灵感的实用工具。 </dd> <dd class="cont2">52次使用</dd> </dl> </li> </ul> </div>  <div class="rightContBox"> <div class="rightTit"> <a href="/articlelist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit lineOverflow">相关文章</div> </div> <ul class="aboutArticleRList"> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/207000.html" class="aBlack" title="JavaScript函数定义及示例详解">JavaScript函数定义及示例详解</a></dt> <dd> <span class="left">2025-05-11</span> <span class="right">502浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/621422.html" class="aBlack" title="智能体安全引领产业升级——国内AI安全产品市场深度分析">智能体安全引领产业升级——国内AI安全产品市场深度分析</a></dt> <dd> <span class="left">2026-08-21</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/619053.html" class="aBlack" title="CSS变量简化按钮悬停效果技巧">CSS变量简化按钮悬停效果技巧</a></dt> <dd> <span class="left">2026-05-31</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/618916.html" class="aBlack" title="JavaScript符号类型详解与应用">JavaScript符号类型详解与应用</a></dt> <dd> <span class="left">2026-05-31</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/612539.html" class="aBlack" title="HTML剪贴板复制粘贴怎么用">HTML剪贴板复制粘贴怎么用</a></dt> <dd> <span class="left">2026-05-26</span> <span class="right">501浏览</span> </dd> </dl> </li> </ul> </div> </div> </div> <script src="/assets/js/frontend/common.js"></script> </body> </html>