vuejs使用当前路由名称设置img src

时间:2017-11-02 03:30:15

标签: vue.js vue-router

有一个文件包含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>

enter image description here

2 个答案:

答案 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]都有效。但是,不知道为什么它们会起作用。 :/