# 視圖層 ### 條件渲染 ``` <pre class="calibre13">``` <span class="token"><</span><span class="token">!</span><span class="token">--</span>wxml<span class="token">--</span><span class="token">></span> <span class="token"><</span>view wx<span class="token1">:</span><span class="token2">if</span><span class="token">=</span><span class="token4">"{{view == 'WEBVIEW'}}"</span><span class="token">></span> <span class="token5">WEBVIEW</span> <span class="token"><</span><span class="token">/</span>view<span class="token">></span> <span class="token"><</span>view wx<span class="token1">:</span>elif<span class="token">=</span><span class="token4">"{{view == 'APP'}}"</span><span class="token">></span> <span class="token5">APP</span> <span class="token"><</span><span class="token">/</span>view<span class="token">></span> <span class="token"><</span>view wx<span class="token1">:</span><span class="token2">else</span><span class="token">=</span><span class="token4">"{{view == 'MINA'}}"</span><span class="token">></span> <span class="token5">MINA</span> <span class="token"><</span><span class="token">/</span>view<span class="token">></span> ``` ``` ``` <pre class="calibre13">``` <span class="token6">// page.js</span> <span class="token3">Page</span><span class="token1">(</span><span class="token1">{</span> data<span class="token1">:</span> <span class="token1">{</span> view<span class="token1">:</span> <span class="token4">'MINA'</span> <span class="token1">}</span> <span class="token1">}</span> ``` ``` ### 選擇器 目前支持的選擇器有： 選擇器樣例樣例描述.class`.intro`選擇所有擁有 class="intro" 的組件\#id`#firstname`選擇擁有 id="firstname" 的組件element`view`選擇所有 view 組件element, element`view, checkbox`選擇所有文檔的 view 組件和所有的 checkbox 組件::after`view::after`在 view 組件后邊插入內容::before`view::before`在 view 組件前邊插入內容### 全局樣式與局部樣式 定義在 app.wxss 中的樣式為全局樣式，作用于每一個頁面。在 page 的 wxss 文件中定義的樣式為局部樣式，只作用在對應的頁面，并會覆蓋 app.wxss 中相同的選擇器。