如何在 svelte 中模板化内联属性？

Question

在这个 repl 示例中，我将如何设置内联 style 属性，而不需要复制锚标记？

https://svelte.technology/repl?version=1.13.6&gist=0a2bd4376b2fe742fb0d233755c44796

Answer 1

您可以制作一个构成样式的计算属性，然后将其放入您的模板中。

<a href="#" style="{{pageStyle}}">{{page}}</a>
<script>
export default {
  data: function() {
    return {
      page: 'About'
    };
  },
  computed: {
    pageStyle: (page) => (page==="about" ? 'color: blue;' : '')
  }
}
</script>

或者更好的是，您可以使用类根据页面名称应用样式。

<a href="#" class="page__{{page}}">{{page}}</a>
<script>
export default {
  data: function() {
    return {
      page: 'About'
    };
  }
}
</script>
<style>
page__About {
  color: blue;
}
</style>

Answer 2

要添加到 Zac 的答案中，您还可以 add a helper function 返回如下样式：

export default {
  helpers: {
    getStyle ( page ) {
      if ( page === 'about' ) return 'color: blue';
      return '';
    }
  }
};

如何在 svelte 中模板化内联属性？

How to template inline attributes in svelte?

svelte