Vuejs如何给元素添加自定义属性

Posted 2023-04-19

参考技术A 有这样一个场景： v-for 渲染一个列表有10个子项，并且把第5个子项后的元素都添加一个属性 data-wow-delay='0.8s' ，实现如下：

可以得出一个给元素添加自定义属性的方法

当然，如果只是添加一个常见属性(css属性)，例如class,style等，下面这种方法也可以。

如何在Polymer 2.0中更改自定义元素的属性？

我正在尝试将paper-tabs自定义元素添加到我的Polymer 2.0应用程序中。

我遇到了改变元素属性的麻烦。我想要选择第一个标签，所以我试图用this property来做

但是当我添加“静态获取属性”脚本时，该元素刚刚从页面中消失。

我究竟做错了什么？

Code

   <paper-tabs selected="{{selected}}">
      <paper-tab>tab1</paper-tab>
      <paper-tab>tab2</paper-tab>
      <paper-tab>tab3</paper-tab>
    </paper-tabs>

    <iron-pages selected="{{selected}}">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </iron-pages>

---

    class MyTabs extends Polymer.Element {
      static get is() { return 'my-tabs'; },

      static get properties() {
        return {
          selected: {
            value: 0,
          }, 
        },
      },
    }

答案

我不确切知道您的问题可以在哪里创建。

但是，在返回块之后，您必须在静态属性块之后删除逗号，并且您选择的属性需要具有您缺少的“type”属性。

下面是我创建的测试元素：

<link rel="import" href="bower_components/polymer/polymer-element.html">
<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="bower_components/paper-tabs/paper-tab.html">
<link rel="import" href="bower_components/iron-pages/iron-pages.html">

<dom-module id="os-test">
    <template>
        <paper-tabs id="tabs" selected="{{tabSelected}}">
            <paper-tab>Tab 1</paper-tab>
            <paper-tab>Tab 2</paper-tab>
            <paper-tab>Tab 3</paper-tab>
        </paper-tabs>

        <iron-pages selected="{{tabSelected}}">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </iron-pages>
    </template>
    <script>
        class OsTestElement extends Polymer.Element {
            static get is() {
                return 'os-test';
            }

            static get properties() {
                return {
                    tabSelected: {
                        type: Number,
                        value: 0,
                        observer: "log"
                    }
                }
            }

            log(tabID) {
                console.log("selected tab : " + tabID);
            }
        }
        window.customElements.define(OsTestElement.is, OsTestElement);
    </script>
</dom-module>

每次单击选项卡时，所选属性都将更改。您可以检查控制台以查看所选的选项卡。

如果这对您没有帮助，您可以添加更多详细信息。

谢谢