技术问答vue鎬庝箞瀹炵幇涓嬫媺鑿滃崟 - 扬州沐宇科技

瑕佸湪 Vue 涓疄鐜颁笅鎷夎彍鍗曪紝浣犲彲浠ヤ娇鐢?Vue 鐨勬寚浠ゅ拰鏁版嵁缁戝畾鍔熻兘銆備笅闈㈡槸涓€涓畝鍗曠殑绀轰緥锛?/span>

1. 棣栧厛锛屽湪浣犵殑 Vue 缁勪欢涓畾涔変竴涓彉閲忔潵瀛樺偍涓嬫媺鑿滃崟鐨勭姸鎬侊紝渚嬪isOpen銆?/span>

data() {
  return {
    isOpen: false
  }
}

2. 鍦?HTML 妯℃澘涓紝浣跨敤v-if鎸囦护鏍规嵁isOpen鍙橀噺鐨勫€兼潵鎺у埗涓嬫媺鑿滃崟鐨勬樉绀哄拰闅愯棌銆?/span>

<div>
  <button @click="isOpen = !isOpen">Toggle Menu</button>
  <ul v-if="isOpen">
    <li>鑿滃崟椤?</li>
    <li>鑿滃崟椤?</li>
    <li>鑿滃崟椤?</li>
  </ul>
</div>

鍦ㄤ笂闈㈢殑绀轰緥涓紝鐐瑰嚮鎸夐挳鏃讹紝isOpen 鐨勫€间細鍒囨崲涓虹浉鍙嶇殑鍊硷紝浠庤€屾帶鍒朵笅鎷夎彍鍗曠殑鏄剧ず鍜岄殣钘忋€?/span>

杩欏彧鏄疄鐜颁笅鎷夎彍鍗曠殑涓€绉嶇畝鍗曟柟娉曘€備綘杩樺彲浠ヤ娇鐢?Vue 鐨勮繃娓℃晥鏋溿€佸姩鐢诲簱鎴栧叾浠栨彃浠跺寮轰笅鎷夎彍鍗曠殑鐢ㄦ埛浣撻獙銆?/span>