html属性中的vuejs变量答案

【问题标题】：vuejs variable in html attributehtml属性中的vuejs变量
【发布时间】：2016-12-22 18:54:29
【问题描述】：

所以我试图将元素的 src 设置为 js 变量，但它只是不起作用。我已经尝试了几种方法，但我无法让它工作。这是一种方法

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

我也试过

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

和

<source :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>

【问题讨论】：

向我们展示您的vue.js 组件代码。此外，this 关键字不应是必需的。
@Cristy：继续并根据请求更新了 OP
有一个插值错误。这是正确的<source :src="show.podcastUrl" type="audio/mpeg">。所以你不需要在绑定指令中留胡子。

标签： html vue.js

【解决方案1】：

这是因为你在 v-bind 指令中使用了小胡子——这是不允许的。

VueJS 中的胡须 {{}} 与模板相关，v-bind 被传递给 JS - 因此作为模板引擎的一部分的胡须不允许进入 v-bind 指令。

这应该是正确的方式：

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

这里也不需要this。

【讨论】：