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中模拟内联属性？

2 个答案: