JS的框架Polymer中的dom-if和is属性使用说明

Polymer是一个基于Web Components标准的JavaScript框架，它提供了一些常用的组件和工具，例如dom-if和is属性。

dom-if

dom-if是Polymer中的一个条件渲染组件，它可以根据条件动态地显示或隐藏元素。我们可以使用dom-if元素包裹需要进行条件渲染的元素，并设置if属性来控制是否显示该元素。当if属性返回true时，元素会被显示；当if属性返回false时，元素会被隐藏。

<dom-if if="{{show}}">
  <template>
    <p>这是一段需要根据show属性进行条件渲染的内容。</p>
  </template>
</dom-if>

在上面的例子中，show属性控制了dom-if包裹的p元素是否显示。当show属性为true时，p元素会被显示；当show属性为false时，p元素会被隐藏。

需要注意的是，dom-if元素只有在其if属性发生变化时才会重新渲染其包裹的内容。因此，如果需要实时更新条件渲染的内容，需要在if属性变化时手动调用dom-if的render方法。

this.show = true; // 显示元素
this.$.if.render(); // 手动调用渲染方法

is属性

is属性是Polymer中的一个扩展元素属性，它可以指定一个元素的自定义标签名。指定is属性后，该元素将被解析为指定的标签名，而不是默认的div元素。

<polymer-element name="my-element" attributes="name" is="div">
  <template>
    <p>Hello, {{name}}!</p>
  </template>
</polymer-element>

在上面的例子中，polymer-element定义了一个名为my-element的元素，并指定了is属性为div。这意味着，当我们在页面中使用my-element标签时，实际上会被解析为一个div元素。

<my-element name="polymer"></my-element>
<!-- 解析成 <div name="polymer"><p>Hello, polymer!</p></div> -->

除了指定标签名外，is属性还可以用来指定所使用的元素是基于Polymer的自定义元素，这样可以使元素获得Polymer提供的特性和功能。

<link rel="import" href="../../bower_components/paper-input/paper-input.html">
<polymer-element name="my-form" is="form">
  <template>
    <paper-input label="Email"></paper-input>
    <paper-input label="Password" type="password"></paper-input>
    <button>登录</button>
  </template>
</polymer-element>

在上面的例子中，my-form元素指定is属性为form，这样可以使其拥有form元素的特性，例如可以使用表单控件和提交按钮。同时，由于使用了Polymer的paper-input元素，使得表单的外观和交互也具有了更好的用户体验。

总之，dom-if和is属性是Polymer中两个非常实用的功能，它们可以帮助我们更方便地完成条件渲染和自定义元素的操作。