Question

我正在使用Orckestra CMS（复合版之前）和Razor模板在asp.net中工作并尝试使用Vue框架。

使用{{option.text}}

时一切正常

<select class="form-control" id="myExample1">
     <option v-for="option in options">{{option.text}}</option>
</select>

但是当我插入v-bind属性时，页面被破坏了：

<select class="form-control" id="myExample1">
     <option v-for="option in options" v-bind:value="option.value">{{option.text}}</option>
</select>

渲染页面失败并显示“错误：'v-bind'是未声明的前缀。”

Answer 1

也许为时已晚，但是对于那些进行搜索的人，我找到了很好的解决方案from here：

格式正确的XML不能为:和@和v-bind:使用快捷方式 v-on:。在XML中，这些属性被解释为名称空间名称。

要在XML（例如XSLT文件）中使用v-bind:和v-on:语法，请添加这些作为XML中的伪命名空间，例如
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
 xmlns:v-bind="https://vuejs.org/v2/api/#v-bind"
 xmlns:v-on="https://vuejs.org/v2/api/#v-on">
然后还将伪xmlns:v-bind添加到对象的<html>元素中。输出–否则定义将在所有地方重复。

Answer 2

v-bind可以在没有:的情况下进行绑定，如下所示：

<option v-for="option in options" v-bind="{value: option.value}">{{option.text}}</option>

等于

<option v-for="option in options" v-bind:value="option.value">{{option.text}}</option>

比照Vue.js#v-bind

Answer 3

vuejs不是this fiddle shows的问题。 Razor模板引擎不知道名称空间v-bind:，只有:是无效的xml。您需要告诉模板引擎有关vuejs的命名空间。以下是关于向Razor模板引擎添加自定义命名空间的another stack overflow article。

Answer 4

解决：问题是XHTML验证，对标签，属性等非常严格。

对此验证进行排序的方法是在< ![CDATA[ "blablabla" ]]>

之间插入代码

<select class="form-control" id="myExample1">
<![CDATA[     
<option v-for="option in options" v-bind:value="option.value">{{option.text}}</option>
  ]]>
</select>

v-bind错误：v-bind'是未声明的前缀

4 个答案: