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

Question

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

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

Answer 1

要添加到 Zac 的答案，您还可以添加一个返回如下样式的辅助函数：

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

Answer 2

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

<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>