# 视图层 ### 条件渲染 ``` <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 中相同的选择器。