vue.js - Vue SVG/HTML 属性插值

Question

这是使用 Vue 将值插入 svg(html) 属性的正确方法吗？它有效，但我在问，因为他们的指南中没有说明。

<svg :stroke-width="`${strokeWidth} px`" >

标签： vue.jsvue-componentvuetify.js

Answer 1

关闭，但您需要添加一个计算属性以返回该stroke-width属性的格式化字符串。

https://vuejs.org/v2/guide/syntax.html#Attributes 不能在 HTML 属性中使用胡须。相反，使用 v-bind 指令：

<div v-bind:id="dynamicId"></div>

所以在你的情况下，假设你strokeWidth是数据：

<template>
  <svg :stroke-width="strokeWidthAttr" >
</template>

<script>
export default {
  data () {
    return {
      strokeWidth: 2
    }
  },
  computed: {
    strokeWidthAttr () {
      return `${this.strokeWidth} px`
    }
  }
}
</script>