有一个文件包含images.Every pictures'name是一个路由名称。我想通过当前路由名称更改img src属性。但是我无法获取完整路径,只能获取图片名称。
<template>
<!-- footer -->
<div class="index-footer">
<img v-bind:src = "$route.name" />
</div>
</template>
<script>
import { Carousel } from 'iview'
// export default {
// components: { Carousel }
// }
export default {
name: 'index',
data () {
return {
index: '/static/img/footer/index.png',
more: '/static/img/footer/index.png',
product: '/static/img/footer/index.png',
information: '/static/img/footer/index.png',
news: '/static/img/footer/index.png',
down: '/static/img/footer/index.png',
enterprise: '/static/img/footer/enterprise.png',
value3: 0,
setting: {
autoplay: true,
autoplaySpeed: 4000,
dots: 'inside',
trigger: 'hover',
arrow: 'hover'
},
scrolled: false
}
},
components: {
Carousel
}
}
</script>
答案 0 :(得分:1)
你根本没有绑定src。您需要使用binding指令绑定src。
喜欢这个
<img :src="index">
或者
<img v-bind:src="index">
答案 1 :(得分:0)
使用this[this.$route.name]
或this[$route.name]
作为v-bind
的绑定文字。
v-bind
evals the text you pass in as javascript code (expression, to be more exact),将表达式中的变量视为视图模型的成员(又名this
)。
这里很棘手的部分是我们想要this[this.$route.name]
,这很容易转换为使用&#34的v-bind文本;我会为你填写this
&# 34;规则Vue提供。我测试了一下,发现this[this.$route.name]
和this[$route.name]
都有效。但是,不知道为什么它们会起作用。 :/