如何在 svg 填充属性中调用 vue.js 变量？答案

【问题标题】：How can I call vue.js variable in a svg fill attribute?如何在 svg 填充属性中调用 vue.js 变量？
【发布时间】：2017-05-21 19:04:02
【问题描述】：

我从后端检索数据并将其用于带有 vue.js 的前端，对于这种情况，我想使用 vue 变量更改 SVG 填充属性。

问题是它不起作用并显示为（在源代码上）：

<rect width="500" class="color color-1" height="500" fill="[% colorAttr() %]"></rect>

而不是：

<rect width="500" class="color color-1" height="500" fill="#fafafa"></rect>

我做错了什么？

小提琴：https://jsfiddle.net/cy5gevLy/

HTML：

<div id="colorHandler">
  <p>[% colorAttr() %]</p>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 856.2987727011634 500" enable-background="new 0 0 500 500" xml:space="preserve">
    <g id="c" transform="translate(0, 0) scale(1.736, 1)">
      <g>
        <rect width="500" class="color color-1" height="500" fill="[% colorAttr() %]"></rect>
      </g>
    </g>
  </svg>
</div>

JavaScript：

var color = new Vue({
  el: '#colorHandler', 
  methods:{
    colorAttr:function(){
        var my_color = '#fafafa';
        return my_color
    }
  },
  delimiters: ["[%","%]"]
});

我做错了什么，如何在 svg 属性中显示我的颜色？

【问题讨论】：

标签： javascript svg vue.js vuejs2

【解决方案1】：

不要在属性中使用插值。使用binding syntax。

<rect width="500" class="color color-1" height="500" v-bind:fill="colorAttr()"></rect>

或者快捷方式

<rect width="500" class="color color-1" height="500" :fill="colorAttr()"></rect>

【讨论】：

【解决方案2】：

我使用了建议的方法，还添加了条件逻辑来从方法内部动态设置颜色。

methods: {
  setAsActiveColor () {
  const activeColor = '#eeeeee';
  const inactiveColor = '#0a0a0a';
  if (this.toggleMoreOptions.moreOptionsToggled) return activeColor;
  return inactiveColor;
  }
}

事实证明，在 Vue 中使用 SVG 很棘手，祝你好运！ :)

【讨论】：