Javascript 对包含冒号的属性使用v-attr'；xmlns:href'；不编译

我试图使用v-attr添加一个属性，该属性包含冒号，冒号是Vuejs key:value的分隔符。它不能编译

<svg>
    <use xmlns:xlink="http://www.w3.org/1999/xlink" 
        v-attr="xmlns:href: '#' + iconID"></use>
</svg>

我也试过了

<svg class="lego-icon">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" 
        xmlns:href="#[[ iconID ]]"></use>
</svg>

---

它也有类似的结果。

我没有使用vue.js，但看看，它似乎是为处理xlink:href而设计的

问题是你的属性是错误的。它应该是

xlink:href

，而不是

xmlns:href

。尝试：

<svg>
    <use v-attr="xlink:href: '#' + iconID"></use>
</svg>

---

（如果要在HTML页面中嵌入SVG，则不需要

xmlns:xlink=”http://www.w3.org/1999/xlink“

）。

您需要将xlink:href括在引号中，以便Vue不会将冒号视为参数分隔符（）

---

对于新版本的

vue.js

，您可以使用

<use v-bind:href="'#icon-' + iconId"></use>

甚至

<use :href="'#icon-' + iconId"></use>

---

Vue.js

似乎会自动使用正确的名称空间设置属性。

我也有同样的问题，不幸的是，我无法实现这一点：我总是遇到以下错误：

[Vue warn]：表达式无效。生成的函数体：scope.href:'/svg/ico.svg#'+scope.option.icon

这是有效答案

<use :href="'#icon-' + iconId"></use>