html属性中的vuejs变量

因此，我试图将元素的src设置为js变量，但它不起作用。我已经尝试了一些方法，但我无法让它发挥作用。这里有一条路

<source src="{{ this.show.podcastUrl }}" type="audio/mpeg">

我也试过了

<source v-bind:src="{{ this.show.podcastUrl }}" type="audio/mpeg">

及

我做错了什么？这是我的组件

<template>
    <div class="panel panel-default">
        <div class="panel-heading">
            {{ this.show.name }}
            <div class="pull-right">
                {{ this.show.number }}
            </div>
        </div>
        <div class="panel-body">
            <ul>
                <li>Air Date: </li>
                <li>
                    <audio controls>
                        <source v-bind:src="{{ this.show.podcastUrl }}" type="audio/mpeg">
                    </audio>
                </li>
            </ul>
        </div>
    </div>
</template>


<script>
    export default {
        mounted() {
            console.log(this.show);
        },

        props: {
            show: {
                type: Object,
                required: true
            }
        }
    }
</script>

{{this.show.name}
{{this.show.number}

播出日期：



导出默认值{
安装的（）{
console.log（this.show）；
},
道具：{
展示：{
类型：对象，
必填项：true
}
}
}

这是因为您在v-bind指令中使用了胡须，这是不允许的

VUEJ中的胡须

{{}

与模板相关，

v-bind

被传递给JS-因此，作为模板引擎一部分的胡须不允许进入

v-bind

指令

这应该是正确的方法：

<source :src="show.podcastUrl" type="audio/mpeg">

---

这里也不需要

此

。

显示您的

vue.js

组件代码。此外，

this

关键字不应是必需的。@Cristy:继续并用请求更新了OP有一个插值错误。这是正确的

。因此您不需要mustaches-into-binding指令。

<source :src="show.podcastUrl" type="audio/mpeg">