所以我试图将一个元素的 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>
最佳答案
这是因为您在 v-bind 指令中使用了 mustaches - 这是不允许的。
Mustaches {{}}
到 VueJS 与模板相关,v-bind
被传递给 JS - 所以作为模板引擎一部分的 mustaches 不允许进入 v-bind
指令。
这应该是正确的方式:
<source :src="show.podcastUrl" type="audio/mpeg">
这里也不需要this
。
关于html - html属性中的vuejs变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41289941/